一、EventBus到底是个啥？

咱在开发Vue2项目的时候,经常会碰到组件之间需要“隔空传话”的情况——父子组件用props和$emit还挺顺手，可跨层级组件、兄弟组件之间要通信，总不能为了传个值把组件结构改得七扭八歪吧？这时候EventBus就像个“中央联络员”，能帮组件们高效传递消息～那EventBus到底是啥？咋在Vue2里用？用的时候得避哪些坑？今天咱把这些问题拆开来唠唠～

简单说，EventBus是事件总线的意思，背后是“发布 - 订阅”的设计模式，在Vue2里，我们可以搞一个“空的Vue实例”当这个“总线”——它就像个中转站，某个组件要发消息（发布事件），就往这个中转站丢个“包裹”；其他组件想收消息（订阅事件），就去中转站盯着自己想要的“包裹”，这样不管组件层级多深、是不是兄弟关系，都能通过这个中转站实现通信～

举个现实例子：公司里的公告栏（EventBus），行政部（组件A）贴个“下午发下午茶”的通知（发布事件），全公司同事（组件B、C、D…）谁关心下午茶（订阅事件），看到通知就知道要干啥——这就是EventBus的核心逻辑～

Vue2里咋实操EventBus？

想用好EventBus，得走这几步：

先建个EventBus实例

新建个单独的JS文件（比如叫eventBus.js），里面导入Vue然后导出一个空实例：

import Vue from 'vue'
export default new Vue() 

这个空Vue实例就成了所有组件的“消息中转站”～

发布事件（组件主动发消息）

假设组件A要给其他组件传数据,先导入刚才的EventBus，然后用$emit触发事件：

// 组件A的代码
import eventBus from './eventBus.js'  
export default {
  methods: {
    sendMsg() {
      // 第一个参数是事件名，第二个及以后是要传的数据
      eventBus.$emit('shareData', '我是要分享的内容～')  
    }
  }
}

这里shareData是自定义的事件名，相当于给“包裹”贴个标签，方便其他组件识别～

订阅事件（组件监听消息）

组件B想要接收“shareData”这个事件，同样导入EventBus，用$on监听：

// 组件B的代码
import eventBus from './eventBus.js'  
export default {
  mounted() { // 组件挂载后开始监听
    eventBus.$on('shareData', (data) => {  
      console.log('收到消息：', data) // 这里就能拿到组件A传的数据
    })
  }
}

$on的第一个参数是事件名（得和发布时的名字对应），第二个参数是回调函数，数据会传到这里～

销毁事件（很重要！防止内存泄漏）

如果组件B被销毁了（比如路由切换、条件渲染消失），还留着事件监听的话，下次再触发“shareData”时，销毁的组件可能还会执行回调，导致内存泄漏或者逻辑错乱，所以要在组件销毁前，用$off移除监听：

export default {
  beforeDestroy() { // 组件销毁前的钩子
    eventBus.$off('shareData') // 移除特定事件的监听
    // 也可以用 eventBus.$off() 移除所有事件监听（谨慎用，怕影响其他组件）
  }
}

举个完整例子：假设页面有两个兄弟组件Header和Footer，点击Header的按钮，让Footer显示提示语。

• Header.vue里写点击事件，用$emit发消息；
• Footer.vue里用$on监听消息，更新显示内容；
• 两个组件都要在销毁前用$off清理事件。

这样一套操作下来,兄弟组件通信就搞定啦～

EventBus适合哪些场景？

不是所有组件通信都得用EventBus，得看场景合不合适：

跨层级组件通信（比如爷孙、曾孙组件）

如果用props一层层往下传,或者用$emit一层层往上抛，代码会变得很冗余，这时候用EventBus，不管层级多深，直接“跳过中间组件”发消息，效率高多了～

简单的兄弟组件通信

兄弟组件没有共同的父组件帮忙管理状态,又不想为了传个值专门搞Vuex，EventBus就是轻量又快捷的选择～

关联较弱的组件通信

比如导航栏和侧边栏,偶尔需要传个“展开/收起”的状态，用EventBus发个事件就完事，没必要搞复杂的状态管理～

但注意哦！如果是多个组件频繁通信、业务逻辑复杂（比如购物车数据、用户登录状态），EventBus就hold不住了——事件多了容易乱，维护起来像“打地鼠”，这时候得换Vuex这种专门的状态管理工具～

用EventBus容易踩的“坑”是啥？

用着方便，但不注意细节也容易掉坑里，这几个点得盯紧：

事件重复监听

比如组件B被多次创建（比如路由来回切换），每次创建都执行$on，就会导致一个事件触发多次回调。
解决办法：要么在$on之前先$off（确保每次监听都是“新鲜”的），要么在组件销毁时必做$off～

事件命名冲突

不同组件如果用了一样的事件名（比如都叫update），就会互相干扰——组件A发的update，组件B和C可能都被触发。
解决办法：给事件名加“命名空间”，比如user_update、product_update，或者用组件名当前缀（如Header_update）～

内存泄漏

如果组件销毁后,事件监听没清理，这些“残留”的监听会一直占着内存，久而久之页面越来越卡。
解决办法：必须在beforeDestroy钩子中用$off移除对应的事件监听！

EventBus和Vuex该咋选？

很多同学分不清这俩，其实核心看场景复杂度：

• EventBus：轻量、灵活，适合简单的跨组件通信，不需要集中管理状态的场景，比如一个页面内几个小组件传个开关状态、临时消息；
• Vuex：是专门的状态管理库，适合复杂场景——多个组件共享状态（比如购物车商品列表）、状态需要持久化（比如用户登录态）、业务逻辑绕来绕去（比如订单流程），Vuex有严格的状态修改流程（actions、mutations），能让代码更可控～

简单说：小打小闹用EventBus，大阵仗上Vuex～

Vue3里EventBus咋变了？

Vue3用Composition API后，没有`new Vue()`这一套了，所以不能直接用Vue2的EventBus逻辑，这时候可以自己实现发布订阅模式（比如用`mitt`库，npm安装后创建实例，用`on`、`emit`、`off`方法），不过这属于Vue3的延伸知识，咱主要聊Vue2，所以知道版本差异就行～

EventBus在Vue2里是个“轻骑兵”，解决跨组件通信的小问题特别顺手，但得注意事件命名、销毁逻辑、场景适配这几点，小项目或简单通信场景用它，开发效率飞起；要是碰到复杂状态管理，果断换Vuex更稳～记住这些点，下次用EventBus就不容易踩坑啦～