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']