Vue全局事件总线详解简介

Vue全局事件总线是一种组件间传信的方式，适用于任意组件间传信。轻巧松 它是一种在Vue应用中传递数据的机制，使得不同组件之间能不通过父子关系或Vuex等状态管理库进行数据交互。

满足全部组件都能访问得到全局事件总线

全局事件总线的基本上目的是让全部组件都能访问到一个公共的事件中心，从而实现组件间的传信。在Vue中，我们能通过在原型上挂载一个事件中心对象来实现这一点。

能调用$on, $off 和 $emit实现全局事件总线完整实例代码

javascript // main.js import Vue from 'vue';

// 创建Vue实例 const app = new Vue({ // ... 配置项 });

// 创建事件总线 Vue.prototype.$bus = new Vue;

// 组件A export default { mounted { this.$bus.$on; }, beforeDestroy { this.$bus.$off; }, methods: { handleEvent { // 处理事件 } } };

// 组件B export default { mounted { this.$bus.$emit; } };

在Vue中，全局事件总线通常被称为EventBus。它是一种在Vue应用中传递数据的机制，使得不同组件之间能不通过父子关系或Vuex等状态管理库进行数据交互。

一、 Vue2.0 版本

在Vue2.0版本中，我们能在main.js中创建一个Vue实例，并将该实例赋值给Vue的原型，从而使得全部组件都能通过this.$bus访问到全局事件总线。

二、 Vue3.0版本

在Vue3.0版本中，我们能用第三方库mitt来实现全局事件总线。

javascript // main.js import { createApp } from 'vue'; import mitt from 'mitt';

// 创建事件总线 const bus = mitt;

Vue全局事件总线是一种在Vue应用中传递数据的机制，适用于任意组件间传信。通过在Vue原型上挂载一个事件中心对象，我们能实现组件间的传信。在实际应用中，我们能根据需要选择合适的版本和库来实现全局事件总线。

---