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 有关）。

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

score 1 · Accepted Answer

您不需要this在 VueJS 指令中使用。此外，您需要使用以下命令，而不是使用静态属性v-bind：

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

此外，大小写存在问题：对于 VueJS，在模板中的 props 应该是 kebab-cases ，而在组件 JS 逻辑中你应该使用 camelCase props。请记住更新您的子组件的prop声明，以便它可以正确读取新道具：

 props: ["commentRecId"]

score 1 · Accepted Answer

您需要使用 VueJS 绑定

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

props: ['commentRecId']

2 回答 2