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

Posted 2023-02-23

【中文标题】Vue.js 变量在传递给另一个组件后未定义

【英文标题】：Vue.js variable undefined after being passed to another component

【发布时间】：2020-07-23 16:22:50

【问题描述】：

我在组件 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)

【参考方案1】：

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

computed :
  statID ()
   return this.commentRecId;
  

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

【讨论】：

如何在mounted中引用statID？

你可以像console.log("Edit Comment this.commentRecId: " + this.statID);一样引用它

嗯，我收到了ReferenceError: statID is not defined at a.mounted

你之前有没有像this.statID一样加this

我尝试了一下，现在它只是说它是未定义的。这是您提出建议后的样子：pastebin.com/PJrZJ4N6