Events Vue，如何从父组件中的两个子组件侦听同一事件？

由于我接收相同的事件并对这两个事件使用相同的事件处理程序，有没有一种方法可以共同侦听它们，即我可以使事件像本机事件一样冒泡，并使用

<template id="parentComp">
<child-comp-1 @customEvent="handler"/>
<child-comp-2 @customEvent="handler"/>
</template>

---

除了将事件传递给父级之外，还可以使用事件总线。这篇文章很好地描述了这一原则：

---

其思想是使用共享Vue实例来处理事件。然后，您将在不同的元素中导入此实例，与导入库的方式相同

您可以使用$listeners进行事件冒泡。给你举个例子

Vue.component（'internal-com'{
模板：“内部组件发射事件”，
方法：{
innerClick（）{
这是.$emit（'internal-com-click-event'）；
}
}
})
Vue.component（'middle-com'{
模板：“中间组件”
})
Vue.组件（'outer-com'{
模板：“外部组件”
})
var app=新的Vue({
el:“#应用程序”，
方法：{
eventHandler（）{
警报（'已接收事件'）
}
}
})

---

从多个组件进行监听。 从根级别发出并侦听事件

 <template id="parentComp" @customEvent="handler">

现在，您可以使用

this.$root.$emit('myTestEvent',dataToBeSent);

---

事件总线确实是正确的解决方案，因为当您的项目增长时，它仍然比使用

$listeners

更易于管理。此外，如果它继续增长，您将很好地切换到Vuex。从我所看到的情况来看，这并不能解释如何从多个类似的组件进行监听

mounted(){
    this.$root.$on('myTestEvent', (dataReceived) => {
       //...
    })
}