从子组件mounted（）函数（Vue.js 2）列表中只收到一个发射[重复]

Posted 2023-02-22

【中文标题】从子组件mounted（）函数（Vue.js 2）列表中只收到一个发射[重复]

【英文标题】：Only a single emit being received from list of child components mounted() function (Vue.js 2) [duplicate]

【发布时间】：2021-03-18 04:12:51

【问题描述】：

简而言之，我有一个主要的 <App /> 组件，其中包含一个 <CommentList /> 组件。

<CommentList /> 包含许多 <Comment /> 组件，其中更多是动态添加的。

在我的<App /> 中，我有一个监听器，用于记录何时添加评论：

// App.vue
mounted() 
    this.$on('comment-added', console.log('wow'))

并且事件是从<Comment /> 组件发出的（孙子，如果这很重要？）

// Comment.vue
mounted() 
    console.log('this works for each comment no problem')
    this.$emit('comment-added') // this only ever works 1 time

问题是 <App /> 挂载函数中的侦听器仅被调用一次，即使在后续 cmets 添加到列表之后也是如此。

我不明白为什么，有什么想法吗？一直在查看文档和搜索，但找不到发生这种情况的任何原因。

谢谢！

【问题讨论】：

您是否尝试指出来自methods 部分而不是console.log 的方法？

【参考方案1】：

我推荐使用inject/provide进行祖孙组件交互

App.vue

provide()
return 
    addComment: this.addComment
  
,
methods:
    addComment()
     console.log('wow')
   

// Comment.vue

inject:['addComment'],
mounted() 
   this.addComment()