vue 2 中事件总线通过创建空 vue 实例作为中央事件中心实现组件通信，需手动 $on 监听和 $off 清理以防内存泄漏；vue 3 已废弃该方式，应改用 mitt、pinia 或 provide/inject。
Vue 2 中通过事件总线（Event Bus）实现独立组件间通信，核心是创建一个**空的 Vue 实例作为中央事件中心**，让不相关联的组件都能向它发消息或监听消息。它轻量、直接，适合中小型项目或临时解耦场景。
一、创建全局事件总线
新建一个 event-bus.js 文件（推荐放在 src/utils/ 或 src/plugins/ 下）：
import Vue from 'vue'<br>export const EventBus = new Vue()
这个实例没有模板、不挂载 DOM，只用来调用 $emit 和 $on 方法，本质就是一个“消息中转站”。
二、在组件中发送事件
在任意组件（比如按钮页、表单页）中导入并触发事件：
import { EventBus } from '@/utils/event-bus.js'<br><br>export default {<br> methods: {<br> notifyLogin() {<br> EventBus.$emit('user-logged-in', {<br> id: 1001,<br> username: 'lily'<br> })<br> },<br> toggleSidebar() {<br> EventBus.$emit('sidebar-toggle') // 不带参数也行<br> }<br> }<br>}
注意：$emit 第一个参数是**事件名（字符串）**，建议用 kebab-case 风格（如 'data-updated'），避免命名冲突。
三、在另一组件中接收事件
在需要响应的组件（比如导航栏、数据展示页）中监听：
import { EventBus } from '@/utils/event-bus.js'<br><br>export default {<br> data() {<br> return {<br> userInfo: null,<br> isSidebarOpen: false<br> }<br> },<br> mounted() {<br> EventBus.$on('user-logged-in', (payload) => {<br> this.userInfo = payload<br> })<br> EventBus.$on('sidebar-toggle', () => {<br> this.isSidebarOpen = !this.isSidebarOpen<br> })<br> },<br> beforeDestroy() { // Vue 2 生命周期钩子<br> EventBus.$off('user-logged-in')<br> EventBus.$off('sidebar-toggle')<br> }<br>}
关键点：
- 监听必须在
mounted或之后进行，确保实例已就绪 - 务必在组件销毁前用
$off清理监听器，否则可能引发内存泄漏或重复执行 - 可传入具体回调函数来精准移除（
$off('name', handler)），更安全
四、Vue 3 中不兼容，需换方案
Vue 3 已移除 new Vue()，不再支持原生 Event Bus。若项目已升级，应改用：
- 第三方库
mitt（最轻量）：创建emitter实例，用emit/on/off - PINIA 管理共享状态（推荐长期维护项目）
- Provide / Inject（适用于祖孙组件，非完全独立场景）
原 Event Bus 在 Vue 2 里简单有效，但别滥用——组件间通信逻辑分散后，调试和追踪会变难。小功能用它很顺手，大项目建议早过渡到状态管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
