javascript - 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 声明，以便它可以正确读取新的 prop:

 props: ["commentRecId"]