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

Question

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

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

由于事件名称只是一个字符串，您可以向事件添加 prefix/namespace，例如 bus.$emit('domain.foo') 或 bus.$emit('domain/foo')。

如果你觉得你的应用变得越来越复杂，那就去vuex吧。

vuejs2 - how to create event buses for single file component hierarchies