Vue3中的事件总线详解
作者：csdn_HPL
在Vue3中,推荐使用CompositionAPI和第三方库mitt来实现事件总线,而不是Vue2中使用Vue实例的方式
在 Vue 3 中，由于创建 Vue 实例的方式发生了变化，并且推荐使用 Composition API，事件总线的实现方式也与 Vue 2 有所不同。
一、Vue 3 事件总线的核心变化
在 Vue 2 中，我们通常 new Vue() 来创建事件总线。但在 Vue 3 中：
- Vue 构造函数不再直接导出，取而代之的是
createApp。 - Vue 实例不再是一个事件发射器，它移除了
$on,$off, 和$once方法。
因此，我们不能再用 new Vue() 来创建事件总线。
二、Vue 3 实现事件总线的推荐方案
有几种方式可以在 Vue 3 中实现事件总线模式，这里介绍最主流和推荐的两种。
方案一：使用第三方库mitt（最推荐）
mitt 是一个小巧（约 200 bytes）、功能完整的的事件总线库，它不依赖 Vue，但可以完美地与 Vue 3 集成。这是目前 Vue 社区公认的最佳实践。
1. 安装 mitt
npm install mitt
2. 创建事件总线
创建一个单独的文件（如 event-bus.js）：
// event-bus.js import mitt from 'mitt'; // 创建一个 mitt 实例并导出 const emitter = mitt(); export default emitter;
3. 在组件中使用
发布事件（发送消息）：
使用 emitter.emit(eventType, data)
<!-- PublisherComponent.vue -->
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script setup>
import { ref } from 'vue';
import emitter from './event-bus.js'; // 导入事件总线
const message = ref('Hello from Vue 3!');
const sendMessage = () => {
// 发布一个名为 'messageEvent' 的事件，并携带数据
emitter.emit('messageEvent', message.value);
// 也可以发布没有数据的事件
// emitter.emit('someNotification');
};
</script>
订阅事件（接收消息）：
使用 emitter.on(eventType, callback)
关键点： 在 Composition API 的 setup 中，需要在 onMounted 生命周期中订阅，并在 onUnmounted 中取消订阅，以防止内存泄漏。
<!-- SubscriberComponent.vue -->
<template>
<div>收到消息: {{ receivedMessage }}</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import emitter from './event-bus.js'; // 导入事件总线
const receivedMessage = ref('');
// 定义处理事件的函数
const handleMessage = (data) => {
receivedMessage.value = data;
console.log('收到数据:', data);
};
// 组件挂载后订阅事件
onMounted(() => {
emitter.on('messageEvent', handleMessage);
});
// 组件卸载前取消订阅
onUnmounted(() => {
emitter.off('messageEvent', handleMessage);
});
</script>
mitt 的其他常用 API：
emitter.all: 一个 Map，可以查看所有事件和处理函数。emitter.off(eventType, handler): 移除特定事件的特定监听器。emitter.emit(eventType): 触发事件，可不传数据。
方案二：使用provide/inject实现一个简单的事件总线
如果你不想引入第三方库，并且应用场景比较简单，可以利用 Vue 3 的 provide 和 inject 特性，在根组件提供一个响应式对象作为事件总线。
1. 在根组件（如 App.vue）提供事件总线
<!-- App.vue -->
<template>
<PublisherComponent />
<SubscriberComponent />
</template>
<script setup>
import { ref, provide } from 'vue';
import PublisherComponent from './components/PublisherComponent.vue';
import SubscriberComponent from './components/SubscriberComponent.vue';
// 1. 创建一个响应式对象来存储事件和监听器（简化版）
const eventBus = ref({});
// 2. 创建事件总线的方法
const eventBusMethods = {
$on(event, callback) {
if (!eventBus.value[event]) {
eventBus.value[event] = [];
}
eventBus.value[event].push(callback);
},
$emit(event, ...args) {
if (eventBus.value[event]) {
eventBus.value[event].forEach(callback => callback(...args));
}
},
// 可以自行实现 $off 等功能
};
// 3. 将事件总线方法提供给所有子组件
provide('eventBus', eventBusMethods);
</script>
2. 在子组件中注入并使用
发布者组件：
<!-- PublisherComponent.vue -->
<template>
<button @click="$emitMessage">发送</button>
</template>
<script setup>
import { inject } from 'vue';
// 注入事件总线
const eventBus = inject('eventBus');
const $emitMessage = () => {
eventBus.$emit('myEvent', '一些数据');
};
</script>
订阅者组件：
<!-- SubscriberComponent.vue -->
<template>
<div>消息: {{ message }}</div>
</template>
<script setup>
import { ref, inject, onMounted, onUnmounted } from 'vue';
// 注入事件总线
const eventBus = inject('eventBus');
const message = ref('');
const handleEvent = (data) => {
message.value = data;
};
onMounted(() => {
eventBus.$on('myEvent', handleEvent);
});
// 注意：这个简易实现需要更复杂的逻辑来实现 $off，这里省略了取消订阅
// onUnmounted(() => { ... });
</script>
三、Vue 3 事件总线 vs. 状态管理工具（如 Pinia）
| 特性 | 事件总线（如 mitt） | 状态管理（如 Pinia） |
|---|---|---|
| 目的 | 组件间通信，传递事件和消息 | 全局状态管理，集中管理数据 |
| 数据流 | 单向或双向，通常是“一发一收” | 单向数据流，状态可预测 |
| 数据持久性 | 事件触发后即消失，不存储数据 | 数据存储在 Store 中，是持久的 |
| 适用场景 | 简单的、一次性的通知（如显示通知、表单提交完成） | 复杂的、需要共享和持久化的数据（如用户登录信息、购物车） |
| 调试 | 相对困难，事件是匿名的 | 非常方便，有 DevTools 支持 |
总结与建议
- 对于 Vue 3，强烈推荐使用
mitt来实现事件总线。它轻量、简单且完美契合 Vue 3 的理念。 - 将事件总线的创建逻辑放在一个独立的模块中（如
event-bus.js），便于管理和维护。 - 务必记住在组件卸载时（
onUnmounted）取消事件监听，这是避免内存泄漏的关键。 - 如果应用的数据流变得非常复杂，需要多个组件共享和修改同一份数据，请考虑使用 Pinia 这类专门的状态管理库，而不是滥用事件总线。事件总线更适合处理行为和通知，而非管理状态。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。