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



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

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

你可以创建一个像 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。

最新更新