Vue 中的全局事件总线：Vue2 与 Vue3 的实现与对比

在 Vue 项目开发过程中，组件间通信是一个绕不开的话题。当涉及到兄弟组件、隔代组件之间的数据传递与事件触发时，全局事件总线（Global Event Bus）就成为了一种高效且常用的解决方案。Vue2 和 Vue3 在实现全局事件总线的方式上既有相似之处，也存在差异，本文将深入探讨这两种版本中全局事件总线的原理、使用方法，并通过实例展示其具体应用。

Vue2 中的全局事件总线

原理

Vue2 中的全局事件总线基于Vue构造函数的实例特性。Vue实例本身具有一套完整的事件系统，包括$on（监听事件）、$emit（触发事件）、$off（移除事件监听器）等方法。通过创建一个空的Vue实例，将其作为全局事件总线，项目中的各个组件都可以通过该实例来监听和触发事件，从而实现跨组件通信。

使用方法

创建全局事件总线：在项目中创建一个单独的文件，例如eventBus.js，用于创建全局事件总线实例。

import Vue from 'vue';export const eventBus = new Vue();

在组件中使用：

监听事件：在需要接收事件的组件的created生命周期钩子函数中，使用$on方法监听事件。

import { eventBus } from './eventBus.js';
export default {created() {eventBus.\$on('customEvent', (data) => {console.log('接收到自定义事件数据:', data);});}
}

触发事件：在需要发送事件的组件中，使用$emit方法触发事件，并传递相关数据。

import { eventBus } from './eventBus.js';export default {methods: {sendData() {const data = { message: 'Hello from another component' };eventBus.\$emit('customEvent', data);}}}

移除事件监听器：为了避免内存泄漏，在组件销毁时，需要使用$off方法移除事件监听器。通常在beforeDestroy生命周期钩子函数中进行操作。

import { eventBus } from './eventBus.js';export default {created() {this.eventHandler = (data) => {console.log('接收到自定义事件数据:', data);};eventBus.\$on('customEvent', this.eventHandler);},beforeDestroy() {eventBus.\$off('customEvent', this.eventHandler);}}

实例

假设我们有一个简单的 Vue2 项目，包含两个兄弟组件ComponentA和ComponentB，ComponentA中有一个按钮，点击按钮时向ComponentB传递数据。

ComponentA.vue

<template><div><button @click="sendData">发送数据\</button></div></template>\<script>import { eventBus } from './eventBus.js';export default {methods: {sendData() {const data = { message: '这是来自ComponentA的数据' };eventBus.\$emit('dataFromA', data);}}}</script>

ComponentB.vue

<template><div><p>接收到的数据: {{ receivedData.message }}</p></div></template><script>import { eventBus } from './eventBus.js';export default {data() {return {receivedData: null};},created() {eventBus.$on('dataFromA', (data) => {this.receivedData = data;});}}</script>

通过上述代码，当点击ComponentA中的按钮时，ComponentB就能接收到传递过来的数据并进行展示。

Vue3 中的全局事件总线

原理

Vue3 移除了Vue构造函数，采用了组合式 API 和响应式系统的新特性。在 Vue3 中实现全局事件总线，通常借助第三方库（如mitt或tiny-emitter），或者使用Vue3的provide/inject和ref、reactive等响应式 API 来模拟类似的功能。这些库提供了简洁的事件监听和触发接口，能够满足跨组件通信的需求。

使用 mitt 库实现全局事件总线

安装 mitt 库：在项目根目录下执行以下命令安装mitt库。

npm install mitt

创建全局事件总线：创建eventBus.js文件，初始化mitt实例。

import mitt from'mitt';export const eventBus = mitt();

在组件中使用：

监听事件：在需要接收事件的组件中，使用eventBus.on方法监听事件。

import { eventBus } from './eventBus.js';export default {setup() {const handleEvent = (data) => {console.log('接收到自定义事件数据:', data);};eventBus.on('customEvent', handleEvent);return {handleEvent};},beforeUnmount() {eventBus.off('customEvent', handleEvent);}}

触发事件：在需要发送事件的组件中，使用eventBus.emit方法触发事件，并传递数据。

import { eventBus } from './eventBus.js';export default {methods: {sendData() {const data = { message: 'Hello from Vue3 component' };eventBus.emit('customEvent', data);}}}

使用 Vue3 的响应式 API 模拟全局事件总线

创建全局状态：在store.js文件中，使用ref或reactive创建全局响应式数据和方法。

import { ref } from 'vue';const globalData = ref(null);const eventBus = {setData(data) {globalData.value = data;},getData() {return globalData.value;}};export default eventBus;

在组件中使用：

监听数据变化：在需要接收数据的组件中，导入eventBus并监听globalData的变化。

import eventBus from './store.js';import { watch } from 'vue';export default {setup() {const data = eventBus.getData();watch(data, (newValue) => {console.log('数据发生变化:', newValue);});return {data};}}

更新数据：在需要发送数据的组件中，调用eventBus的setData方法更新数据。

import eventBus from './store.js';export default {methods: {sendData() {const data = { message: '这是更新后的数据' };eventBus.setData(data);}}}

实例

同样以两个兄弟组件ComponentC和ComponentD为例，使用mitt库实现ComponentC向ComponentD传递数据。

ComponentC.vue

<template><div><button @click="sendData">发送数据\</button></div></template><script>import { eventBus } from './eventBus.js';export default {methods: {sendData() {const data = { message: '来自ComponentC的数据' };eventBus.emit('dataFromC', data);}}}</script>

ComponentD.vue

<template><div><p>接收到的数据: {{ receivedData.message }}\</p></div>
</template>
<script>import { eventBus } from './eventBus.js';import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const receivedData = ref(null);const handleEvent = (data) => {receivedData.value = data;};onMounted(() => {eventBus.on('dataFromC', handleEvent);});onUnmounted(() => {eventBus.off('dataFromC', handleEvent);});return {receivedData};}
}</script>

当点击ComponentC中的按钮时，ComponentD会接收到数据并进行展示。

Vue2 与 Vue3 全局事件总线对比

对比项	Vue2	Vue3
实现方式	基于`Vue`构造函数实例	借助第三方库（如`mitt`）或使用响应式 API 模拟
事件监听与触发	`$on`、`$emit`、`$off`	第三方库使用`on`、`emit`、`off`；响应式 API 通过数据变化监听和更新
内存管理	需要在组件销毁时手动移除事件监听器以避免内存泄漏	同样需要在组件卸载时移除事件监听器，使用第三方库时操作类似，响应式 API 通过`watch`等函数的正确使用来管理
学习成本	与 Vue2 的实例化开发模式紧密结合，熟悉 Vue2 的开发者容易上手	引入新的概念和库，对于习惯 Vue2 的开发者需要一定学习成本