传递给另一个组件后，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;
  }

}

并通过像this这样的前缀console.log("Edit Comment this.commentRecId: " + this.statID);在挂接的钩子中引用它