Event Bus：Vue组件间的'广播电台'，轻松实现跨组件通信！

大家好，我是小杨，一个写了6年前端的老码农。今天咱们来聊聊Vue项目中一个简单实用的跨组件通信方案------Event Bus（事件总线）。它就像个广播电台，让任意组件之间都能轻松"喊话"，特别适合那些没有直接父子关系的组件通信。

一、Event Bus是啥？

想象一下这个场景：

组件A在页面左上角
组件B在页面右下角
它们不是父子组件，但需要通信

这时候Event Bus就派上用场了！它本质上就是一个Vue实例，用来在组件间传递事件和数据。

二、快速创建一个Event Bus

新建一个event-bus.js文件：

javascript 复制代码

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

就这么简单！一个全局的事件总线就创建好了。

三、基本使用：发送和接收事件

1. 发送事件（发射信号）

在需要发送事件的组件中：

javascript 复制代码

import { EventBus } from './event-bus.js'

// 发送一个带数据的事件
EventBus.$emit('user-logged-in', { username: 'xiaoyang' })

// 发送一个不带数据的事件
EventBus.$emit('show-loading')

2. 接收事件（监听信号）

在需要接收事件的组件中：

javascript 复制代码

import { EventBus } from './event-bus.js'

export default {
  created() {
    // 监听事件
    EventBus.$on('user-logged-in', (userData) => {
      console.log(`用户${userData.username}登录了！`)
    })
    
    EventBus.$on('show-loading', () => {
      this.isLoading = true
    })
  },
  
  // 记得在组件销毁时移除监听
  beforeDestroy() {
    EventBus.$off('user-logged-in')
    EventBus.$off('show-loading')
  }
}

四、实际应用场景

场景1：用户登录后全局通知

javascript 复制代码

// Login.vue (登录组件)
login() {
  api.login().then(res => {
    EventBus.$emit('login-success', res.userInfo)
  })
}

// Header.vue (头部组件)
EventBus.$on('login-success', (userInfo) => {
  this.userAvatar = userInfo.avatar
})

// Cart.vue (购物车组件)
EventBus.$on('login-success', () => {
  this.loadCartItems()
})

场景2：全局loading控制

javascript 复制代码

// api.js (请求拦截器)
axios.interceptors.request.use(config => {
  EventBus.$emit('show-loading')
  return config
})

axios.interceptors.response.use(response => {
  EventBus.$emit('hide-loading')
  return response
})

// App.vue
EventBus.$on('show-loading', () => {
  this.loading = true
})
EventBus.$on('hide-loading', () => {
  this.loading = false
})

五、Event Bus的优缺点

优点：

简单易用：几行代码就能实现跨组件通信
解耦组件：完全不相关的组件也能通信
灵活：可以一对多广播

缺点：

难以追踪：事件来源不清晰，调试困难
可能内存泄漏：忘记移除监听会导致问题
不适合大型项目：事件多了会难以维护

六、最佳实践建议

统一管理事件名：避免拼写错误

javascript 复制代码

// event-types.js
export const LOGIN_SUCCESS = 'login-success'
export const SHOW_LOADING = 'show-loading'

记得移除监听：防止内存泄漏
javascript 复制代码
```
beforeDestroy() {
  EventBus.$off(LOGIN_SUCCESS)
}
```
不要滥用：简单的父子通信还是用props/emit
考虑Vuex：复杂状态管理还是用Vuex更合适

七、替代方案

如果项目复杂了，可以考虑：

Vuex：专业的状态管理方案
Provide/Inject：适合层级深的组件通信
Observable API：Vue.observable创建响应式对象

八、总结

Event Bus就像组件间的"对讲机"，使用起来非常简单：

创建：const EventBus = new Vue()
发送：EventBus.$emit('事件名', 数据)
接收：EventBus.$on('事件名', 回调函数)
移除：EventBus.$off('事件名')

适合场景：

非父子组件通信
简单的全局状态通知
小型项目快速开发

记住：小型项目用着爽，大型项目要慎用！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！