[Vuejs]-Why can't I change the text in my child component

by

0👍

✅

Have you misunderstood about child component and props?

You need three .vue files to fulfill your requirements.

One is below.

<template>
  <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link>
</template>

Let’s call it parent.vue.

The second one is the one you haven’t disclosed.

<template>
  <userButton content="tttteeeessssttt"></userButton>
</template>

Let’s call it el-link.vue.
Or are you using Element-UI?

The third is userButton.vue.
It probably exists.

It is in userButton.vue that you need to write content in props.
It is meaningless to write in parent.vue.

It seems to me that you want to have the original content in parent.vue.
If so, you should define a variable named content in parent.vue.
It is not in props.

content must be written in the el-link.vue props.

Use v-bind to propagate content from parent.vue to el-link.vue.
Add :content="content" to <el-link>.

Similarly, propagate content from el-link.vue to userButton.vue.
Add :content="content" to <userButton>.

Leave a comment