Vue中的全局事件总线是什么?如何使用?

简介: Vue中的全局事件总线是什么?如何使用?

Vue中的全局事件总线是一种组件间通信的方式,适用于任意组件间通信。全局事件总线并不是插件,配置文件等等,而是程序员在做Vue开发中总结积累的一套方法,是一套规则,只要满足这套规则,就可以实现组件间的通信。

在Vue中,可以通过调用$on$off$emit方法来实现全局事件总线。

使用$emit方法可以触发总线上指定的事件,例如:

this.$emit('eventName', param1, param2,...)

使用$on方法可以监听总线上某个事件,例如:

this.$on('eventName', callbackFunction)

在回调函数中可以处理该事件。使用$off方法可以清除总线上指定事件的监听器,例如:

this.$off('eventName')

使用$all.clear()方法可以清除总线上所有已绑定的事件监听器,例如:

this.$all.clear()

需要注意的是,$emit分发和$on接收需要在onMounted或之后的生命周期执行,否则无效。同时,刷新页面后,已更新的数据将回到初始值。

相关文章
|
23天前
|
JavaScript 调度
Vue事件总线(EventBus)使用指南:详细解析与实战应用
Vue事件总线(EventBus)使用指南:详细解析与实战应用
38 1
|
3月前
|
JavaScript
Vue学习之--------全局事件总线(2022/8/22)
这篇文章介绍了Vue中全局事件总线(GlobalEventBus)的概念和使用方法,它允许不同组件之间进行通信。文章通过图解和代码实例详细解释了如何安装全局事件总线、在组件中接收和提供数据,以及如何在组件销毁前解绑事件,以避免潜在的内存泄漏问题。
Vue学习之--------全局事件总线(2022/8/22)
|
6月前
|
JavaScript
解释 Vue 的事件总线和 emits 属性。
解释 Vue 的事件总线和 emits 属性。
72 3
|
6月前
|
JavaScript
在Vue中,如何使用事件总线来传递数据和触发事件?
在Vue中,如何使用事件总线来传递数据和触发事件?
91 0
|
6月前
|
JavaScript 前端开发 API
从入门到项目实战 - VUE组件跨通信:vue2 与 vue3 中实现全局事件总线
从入门到项目实战 - VUE组件跨通信:vue2 与 vue3 中实现全局事件总线
370 0
|
6月前
【Vue2.0学习】—全局事件总线GlobalEventBus(六十一)
【Vue2.0学习】—全局事件总线GlobalEventBus(六十一)
|
11月前
|
JavaScript
Vue全局事件总线(任意组件间通信)
Vue全局事件总线(任意组件间通信)
|
11月前
【Vue2.0】— 全局事件总线GlobalEventBus(十九)
【Vue2.0】— 全局事件总线GlobalEventBus(十九)
|
JavaScript
[Vue]全局事件总线
[Vue]全局事件总线
|
JavaScript
Vue(Vue2+Vue3)——44.全局事件总线、45.TodoList案例_事件总线
Vue(Vue2+Vue3)——44.全局事件总线、45.TodoList案例_事件总线