vue.js - vuejs2 - 如何为单个文件组件层次结构创建事件总线

Question

我找到了 LinusBorg 的解决方案 here ，它在任何 Vue 实例中全局注册一个总线。有没有办法在组件层次结构中定义它，以便我可以创建多个作用域总线？基本上，如果我有多个“根”级组件和一些子组件，则应该为“根”级组件及其子组件实例化一个事件总线，而不是所有 Vue 实例。

我不能使用简单的 $emit 和 $on，因为层次结构不限于普通的 parent-child 通信.因此，事件必须经过多个级别。

Answer 1

你可以创建一个像eventBus.js这样的js文件，然后导出一个vue实例:

import Vue from 'vue'
const bus = new Vue()
export default bus

然后你可以在你的 .vue 文件中导入事件总线

import bus from 'path/to/eventBus'

...

bus.$on('foo', ...)

---

根据评论中的讨论更新我的答案:

由于事件名称只是一个字符串，您可以为事件添加前缀/命名空间，例如 bus.$emit('domain.foo') 或 bus.$emit ('域/foo')。

如果你觉得你的应用程序变得越来越复杂，就选择 vuex。