Question

我有一个父组件，它有多个子组件

<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)
}

为什么在安装父组件时无法添加listen？

Answer 1

Custom Events部分介绍了您遗漏的主要区别：

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

您无法使用$ on来收听儿童发出的事件。您必须直接在模板中使用v-on ，如下例所示。

这意味着通过指令使用v-on（或@edit）方式完成子父通信。

你的例子

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

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

在当前实例上触发事件。

这意味着在同一个组件中，您实际上可以使用this.$on并且它将起作用。但是如果你想在父代中使用它，那么你应该使用内联指令让它绑定，否则它将无法工作。

另请注意，emits仅适用于单个步骤，这意味着父级可以捕获它。如果你需要发射子 - >＆gt;孩子 - ＆gt;父，然后你应该从<{strong> subchild中的child 中捕获事件（使用内联绑定），并再次重新发出它以便它转到父级。

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

底线是 - 您在侦听已安装的方法不起作用。希望有所帮助：）

Answer 2

听每个孩子和听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那样优雅。
所以你决定哪种方法对你有好处。

Answer 3

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

在孩子中使用this.$parent.$emit('event-name');
在家长中使用

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

以上内容可让您在父级中触发该事件，以便可以在父级中使用$ on来定位由该子级触发的事件。

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

3 个答案: