Vue.js将变量从父级传递到子级组件

Question

父组件：ShowComment

子组件：EditComment

我正在尝试将this.CommentRecID的值传递给子组件。

我是在ShowComment模板中写的：

<EditComment CommentRecID="this.CommentRecID" v-if="showEdit"></EditComment>

和

this.showEdit = true;

但是this.CommentRecID的值在子组件中显示为未定义：

我认为在子组件中编写props: ["CommentRecID"],已经足以传递数据，但事实并非如此（因为我认为它与jQuery有关）。

我尝试传递值的方式有什么问题？

这里是parent component。

这里是child component。

Answer 1

您不需要在VueJS指令中使用this。另外，您无需使用静态属性，而需要使用v-bind：

<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>

另外，大小写有问题：for VueJS, in template props should be kebab-cased, while in the component JS logic you should use camelCase props。记住要更新子组件的prop声明，以便它可以正确读取新的道具：

 props: ["commentRecId"]

Answer 2

您需要使用VueJS绑定

<EditComment :comment-rec-id="CommentRecID" v-if="showEdit"></EditComment>

props: ['commentRecId']