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 中，我在 props 中有这个：

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;
  }

}

并在挂载的钩子中引用它，并在其前面加上 this 前缀，如 console.log("Edit Comment this.commentRecId: " + this.statID);