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

约翰尼斯

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

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

CodinCat

您可以创建一个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吧。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Vuejs2中从json动态创建组件

Laravel表内的vuejs2组件div

vuejs2:访问组件内的嵌套 javascript 对象

在vuejs2中从子组件更改父项道具

vuejs2:事件发生时重置变量

如何vuejs2使用控制器

如何在vuejs2中递归调用子项?

VueJS2:如何检查数组是否包含特定元素?

vuejs2 插槽如何与父级通信

vuejs2:如何销毁观察者?

如何在vuejs2中使用proxyTable?

如何使用vuejs2自行关闭对话框?

如何发送表单 Fetch Vuejs2 的 POST 请求

如何在 VueJS2 中使用 Bootstrap 5 手风琴组件?

如何使用vuejs2从另一个组件执行功能

如何在VueJS2中将事件目标作为$ emit参数传递?

加载外部js文件,然后立即引用创建的对象[Vuejs2]

在vuejs2数据内动态插入子组件(无需$ compile或滥用v-html)

Vuejs2 在子组件中访问 firebase.auth() 用户信息

vue-browserify将yaml文件作为javascript对象vuejs2导入

为什么在这种情况下我无法过滤本地json文件(vuejs2)

vuejs2如何获取v-for项目以特定间隔显示?

Vuejs2:数组更改后如何重新呈现数组计算的属性

如何在vuejs2中使用节点包vue-tweet-embed?

为什么在 vuejs2 中我的默认道具没有传递给我的子组件?

如何在 vuejs2 中检查表单是否有效并禁用提交按钮?

如何在没有 jquery 的情况下在 vuejs2(带引导程序)中使用 Masonry 网格布局?

VueJS2 排序 JSON

VueJS2:如何提取数组的一个属性并使用它在第二个数组中查找匹配值?