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', ...)

通过评论中的讨论更新我的回答：

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

如果您认为您的应用程序变得越来越复杂，那就去找vuex。