vue2中eventbus跨组件通信本质是用空vue实例作中转站，需统一创建、规范收发、及时清理监听以防内存泄漏；示例含实例导出、$emit触发、$on/$off监听与销毁。
Vue2 中用 EventBus 实现跨组件通信，本质是借助一个空的 Vue 实例作为“中转站”，让不相关联的组件通过它收发消息。关键不在“多高级”，而在于创建统一实例、规范注册/触发时机、及时清理监听器——否则容易引发内存泄漏或重复响应。
创建并导出事件总线实例
新建 src/utils/EventBus.js，内容简洁明确：
- 用
new Vue()创建一个干净实例，不挂载 DOM，也不参与响应式数据管理 - 直接导出该实例，供各组件按需导入，避免全局污染（不推荐挂到
Vue.prototype）
示例代码：
import Vue from 'vue'<br>export default new Vue()
在发送方组件中触发事件
需要通信时，调用 $emit 并传入事件名和数据。事件名建议用语义化字符串（如 'cart:update'），避免纯数字或模糊命名。
- 导入 EventBus 实例
- 在方法中调用
EventBus.$emit('事件名', 数据) - 可放在按钮点击、接口返回、watch 响应等任意逻辑位置
例如购物车数量变化后广播：
import EventBus from '@/utils/EventBus'<br>export default {<br> methods: {<br> updateCartCount() {<br> EventBus.$emit('cart:change', { count: 5 })<br> }<br> }<br>}
在接收方组件中监听与清理
监听必须在组件生命周期早期注册（常用 created 或 mounted），且务必在销毁前清除（beforeDestroy），这是防止内存泄漏的核心动作。
- 在
created中用$on绑定回调函数 - 在
beforeDestroy中用$off移除对应事件监听（传相同事件名即可） - 若使用箭头函数定义回调，注意
this指向是否正确；普通函数写法更稳妥
示例：
import EventBus from '@/utils/EventBus'<br>export default {<br> data() { return { cartCount: 0 } },<br> created() {<br> EventBus.$on('cart:change', ({ count }) => {<br> this.cartCount = count<br> })<br> },<br> beforeDestroy() {<br> EventBus.$off('cart:change')<br> }<br>}
进阶建议：封装简易工具函数（可选）
若项目中大量使用 EventBus，可封装一层带错误捕获和日志的工具函数，提升可维护性：
- 导出
emitEvent(eventName, payload)替代裸调$emit - 导出
listenEvent(eventName, callback)和removeEvent(eventName, callback) - 在
emit中加 try-catch，在listen中做参数校验，避免运行时静默失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
