有没有办法捕获 vuejs 中多个子组件发出的事件？答案

【问题标题】：Is there a way to capture events emitted by multiple child components in vuejs?有没有办法捕获 vuejs 中多个子组件发出的事件？
【发布时间】：2017-12-23 22:26:20
【问题描述】：

我有一个包含多个子组件的父组件

<grid>
   <cell></cell>
   <cell></cell>
   <cell></cell>
</grid>

我的单元格组件发出一个带有有效负载的事件，说它正在被编辑 this.$emit('editing',cellId)

我知道我可以像这样捕捉事件 <cell @editing="do something"></cell> 或使用EventBus.$on('editing') 捕获，我也不想使用root 侦听器this.$root.$on('editing')

但是因为它是父组件，当父组件被挂载时，我如何监听“编辑”事件

mounted: function(){
    this.$on('editing',dosomething)
}

为什么挂载了父组件后无法添加监听？

【问题讨论】：

您的mounted 函数正在侦听父组件上的事件。子组件在自己身上发出事件。你的目标是什么，为什么不想使用<cell @editing="..."> 形式的事件处理？
我有点不清楚你的目标是什么。如果可能，请阐明您的目标。但是如果你想在父组件中监听editing事件，你可以在mounted hook中使用EventBus：EventBus.$on('editing')
我想从概念上理解这一点以及儿童中的事件是如何工作的。我知道的最好的方法是 <cell @editing="..." 不使用 eventBus 或发射到 $root 那么在 mounted 中监听和在组件 @editing 上监听有什么区别
@RoyJ - 我不认为这是正确的：Your mounted function is listening for events on the parent component。您不能向孩子发出事件，它会发生在 props 上。 mounted 函数实际上监听当前实例内的事件。
@AndreyPopov 当前实例是父组件。我使用“parent”来区分他的父组件和子组件，而不是我正在谈论的组件和它的父组件。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

Custom Events 部分描述了您缺少的主要区别：

另外，父组件可以在使用子组件的模板中直接使用v-on监听子组件发出的事件。

您不能使用 $on 来监听孩子发出的事件。您必须在模板中直接使用 v-on，如下例所示。

这意味着父子之间的通信是通过一个指令完成的，使用v-on（或@edit）方式。

这里是你的例子

mounted: function(){
    this.$on('editing',dosomething)
}

实际上不会起作用。在emit documentation 中说：

在当前实例上触发一个事件。

这意味着在同一个组件内，您实际上可以使用this.$on，它会起作用。但是如果你想在 parent 中使用它，那么你应该使用 inline 指令来绑定它，否则它将不起作用。

还请记住，emits 仅适用于单个步骤，这意味着父级可以捕获它。如果您需要发出 subchild -> child -> parent，那么您应该从subchild in child 捕获事件（使用内联绑定），然后再次重新发出它以便它转到父母。

如果它在子父范围之外，那么您应该使用所谓的a global bus。基本上，它将所有内容缩小到一个实例，emits 和 listens 用于所有事件。因此，它们不再是子父或任何类型的连接，它们都在同一个实例上，因此您始终可以在您的每个组件中使用它们。

底线是 - 你在挂载上收听的方法不起作用。希望有帮助:)

【讨论】：

【解决方案2】：

听每个child和听EventBus的区别是这样的：

当您发出类似this.$emit('event') the event will be fired only for the parent component. 的事件时
当你做一个像EventBus.$emit('event') then your event will be sent to all the components这样的EventBus时

各有利弊； EventBus 可以将事件发送到永远不会使用该事件的组件（可能成为事件污染），并且父事件发射器可能不像 EventBus 那样优雅。
所以你决定哪种方法对你有好处。

【讨论】：

【解决方案3】：

TL;DR 我自己偶然发现了这个问题。就像另一个人说的那样，当您想从父级绑定事件侦听器时，您需要使用 v-on 因为，嗯 ... ，您正在将某些东西绑定到他的孩子。因此，当孩子检测到事件发生时，实际的回调由孩子运行。

在孩子使用this.$parent.$emit('event-name');
在父级使用

mounted: function() {
    this.$on('event-name', function() {console.log('test')});
}

上面将允许您在父级中触发事件，因此您可以在父级中使用 $on 来访问由子级触发的事件。

【讨论】：