Vue 3 事件总线详解：构建组件间高效通信的桥梁

- 为什么需要事件总线？
- 使用 mitt 实现事件总线
- - 1. 安装 mitt
  - 2. 创建事件总线
  - 3. 在组件中使用事件总线
  - - 发送端组件（例如 ComponentA.vue）
    - 接收端组件（例如 ComponentB.vue）
- 自定义实现事件总线
- 总结

在复杂的前端应用中，组件之间的通信往往需要一种灵活且解耦的方式。传统的 Vue 2 中，我们常使用全局事件总线来实现这种通信，但在 Vue 3 中，由于架构和 API 的变化，全局事件总线并非内置方案。本文将为你详细介绍如何在 Vue 3 中实现事件总线，并通过代码示例展示基于 mitt 的轻量级事件总线实现，以及自定义实现的方法。

为什么需要事件总线？

在组件间通信场景中，当组件之间没有直接的父子关系时，我们可以通过事件总线来实现数据传递。事件总线能够实现以下效果：

解耦合通信： 发送者与接收者无需相互依赖，只需关注事件名称与数据内容。
灵活扩展： 对于简单的跨组件通信需求，不必引入状态管理库（如 Vuex/Pinia）。
简化代码逻辑： 通过统一的事件中转，便于维护与调试。

使用 mitt 实现事件总线

mitt 是一个仅 200 行左右代码的极简事件触发器，非常适合用作 Vue 3 的事件总线。

1. 安装 mitt

首先，通过 npm 或 yarn 安装 mitt：

# 使用 npm 安装
npm install mitt# 或者使用 yarn
yarn add mitt

2. 创建事件总线

在项目中创建一个单独的事件总线文件，如 eventBus.js：

// eventBus.js
import mitt from 'mitt'const emitter = mitt()export default emitter

3. 在组件中使用事件总线

发送端组件（例如 ComponentA.vue）

<template><div><h2>组件 A</h2><button @click="sendMessage">发送消息</button></div>
</template><script setup>
import emitter from '@/eventBus'  // 根据项目实际路径引入const sendMessage = () => {// 触发事件 'custom-event'，传递消息数据emitter.emit('custom-event', 'Hello from Component A')
}
</script>

接收端组件（例如 ComponentB.vue）

<template><div><h2>组件 B</h2><p>收到的消息：{{ message }}</p></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import emitter from '@/eventBus'const message = ref('')// 定义事件处理函数
const updateMessage = (payload) => {message.value = payload
}onMounted(() => {// 监听 'custom-event' 事件emitter.on('custom-event', updateMessage)
})onUnmounted(() => {// 组件销毁时注销事件监听，避免内存泄漏emitter.off('custom-event', updateMessage)
})
</script>

通过上述代码示例，我们实现了组件间的简单通信：当 ComponentA 中点击按钮时，会通过事件总线发送消息；而 ComponentB 监听到该消息后，自动更新显示的内容。

自定义实现事件总线

除了使用 mitt，还可以基于 Vue 3 的响应式 API 自行构造一个简单的事件总线。以下为一个简单的实现示例：

// customEventBus.js
import { reactive } from 'vue'const eventBus = reactive({events: {},// 监听事件on(event, callback) {if (!this.events[event]) {this.events[event] = []}this.events[event].push(callback)},// 触发事件emit(event, payload) {if (this.events[event]) {this.events[event].forEach(callback => callback(payload))}},// 注销事件off(event, callback) {if (this.events[event]) {this.events[event] = this.events[event].filter(cb => cb !== callback)}}
})export default eventBus