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

Question

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

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

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

我在组件AshowEdit的方法中设置为 true ：

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

到目前为止，这工作得非常好并且commentRecID确实有价值。

问题是该变量在其他组件BcommentRecId中显示为未定义，经过数小时的反复试验，我仍然不明白为什么。

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

export default {
    props: ["commentRecId"],

并用它来引用变量：

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

有人可以告诉我我做错了什么吗？

(组分 A ) (组分 B )

Answer 1

尝试将其设置statID为计算属性，在挂载的钩子中使用它：

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

}

this并通过在已安装的钩子中加上前缀来引用它console.log("Edit Comment this.commentRecId: " + this.statID);