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

Question

我在这里找到了LinusBorg的解决方案,它在任何Vue实例中全局注册总线.有没有办法在组件层次结构中定义它,以便我可以创建多个范围的总线？基本上,如果我有一些带有一些子节点的"root"级组件,则应该为"root"级别组件和它的子节点而不是所有Vue实例设置事件总线.

我不能用简单的$emit和$on,因为层次不局限于简单的parent-child通信.所以事件必须通过多个级别传递.

Answer 1

您可以创建一个类似的js文件eventBus.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吧.