Vue.js 传递给另一个组件后变量未定义

Question

我在组件 A 中有一个变量 commentRecId，我想传递它以在组件 B 中使用它。

我将其包含在组件模板中 A:

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

我在组件 A:

的方法中将 showEdit 设置为 true

methods: {
  loadComments: function() {
    this.showEdit = true;
    console.log("this.ShowEdit in ShowComment: " + this.showEdit);
    console.log("commentRecID in ShowComment: " + this.commentRecId);

到目前为止，它工作得很好，commentRecID 确实有价值。

问题是变量 commentRecId 在另一个组件 B 中显示为未定义，经过数小时的反复试验我仍然不明白为什么。

在组件 B 中，我在道具中有这个：

export default {
    props: ["commentRecId"],

并用它来引用变量：

var statID = this.commentRecId;
console.log("Edit Comment this.commentRecId: " + statID);

谁能告诉我我做错了什么？

(Component A) (Component B)

Answer 1

尝试将 statID 设置为计算 属性 在已安装的钩子中使用它：

computed :{
  statID (){
   return this.commentRecId;
  }

}

并在 mounted hook 中引用它，方法是在其前面加上 this 前缀，例如 console.log("Edit Comment this.commentRecId: " + this.statID);