Vue2 Bus是什么？怎么用？新手也能懂的组件通信指南

terry 7小时前阅读数 11 #Vue

在Vue2开发里，组件之间传递数据是绕不开的事儿，父子组件用props传值、$emit触发事件挺顺手，但遇到兄弟组件、跨了好几层的组件通信时，总不能一层层嵌套用$emit吧？这时候“Bus（事件总线）”就成了很多开发者的选择，可Bus到底是个啥？怎么正确用它？用的时候容易踩哪些坑？今天咱们把这些问题拆开来,聊得明明白白。

Vue2 Bus到底是什么？

你可以把Bus理解成“事件公交车”——所有组件都能在这台“公交车”上发消息（触发事件）、收消息（监听事件），它的核心原理特简单：用一个Vue实例当“中央枢纽”，这个实例身上有$on（监听事件）、$emit（触发事件）、$off（销毁事件）这些方法，不同组件通过操作这个实例来实现跨组件通信。

举个现实例子：你在公司茶水间贴了个共享白板（Bus实例），前台小姐姐（组件A）在白板写“下午三点开会”（$emit触发事件），销售团队（组件B）看到白板消息后行动（$on监听事件），整个过程，白板就是大家共享信息的“总线”。

为什么要用Vue2 Bus？

不是所有组件通信都得用Bus，先看它适合的场景：

应对“非父子”组件通信

兄弟组件（比如页面顶部导航和底部版权区）：总不能让父组件当中间商，来回传值吧？
跨多层级组件（比如祖父组件和孙子组件）：要是用props一层层往下传、$emit一层层往上抛，代码会变得又臭又长，维护起来头疼。

项目轻量化需求

如果项目很小，引入Vuex（专门的状态管理库）就像“杀鸡用牛刀”——Vuex要写mutation、action，学习成本和代码量都更高，Bus轻量灵活，几行代码就能搞定简单通信。

但反过来，Bus也有明显短板：项目大了，事件多到满天飞，根本搞不清谁在发、谁在收，维护性直线下降，所以它更适合中小项目的简单跨组件通信，大项目还是得考虑Vuex/Pinia这类工具。

Vue2 Bus怎么实现？

实现Bus有两种常见思路：全局Vue实例方式和插件封装方式，新手从第一种入手，进阶后用第二种更顺手。

全局Vue实例方式（基础版）

步骤很简单：单独建个文件（比如bus.js），创建并导出一个Vue实例，其他组件导入这个实例来通信。

// bus.js
import Vue from 'vue'
export default new Vue() // 创建Vue实例，作为事件总线

组件A（发消息）：导入bus，用$emit触发事件，带数据。

import bus from './bus.js'
export default {
  methods: {
    sendMsg() {
      bus.$emit('send-data', '这是要传递的内容') // 事件名：send-data，数据：字符串
    }
  }
}

组件B（收消息）：导入bus，用$on监听事件，执行回调。

import bus from './bus.js'
export default {
  created() { // 组件创建时监听，确保能收到消息
    bus.$on('send-data', (data) => { 
      console.log('收到数据：', data) // 打印“收到数据：这是要传递的内容”
    })
  }
}

⚠️ 注意：组件销毁时要销毁事件！不然重复创建组件会导致事件重复触发（比如组件B被多次渲染，每次创建都加一个$on，点一次按钮能触发N次回调），解决方法：在组件销毁钩子beforeDestroy里用$off清除事件。

export default {
  created() {
    bus.$on('send-data', this.handleData)
  },
  beforeDestroy() {
    bus.$off('send-data', this.handleData) // 销毁指定事件的监听
  },
  methods: {
    handleData(data) {
      console.log('收到数据：', data)
    }
  }
}

插件封装方式（进阶版）

如果每个组件都要import bus from './bus.js'，太麻烦，可以把Bus封装成Vue插件，挂到Vue原型上，这样所有组件都能通过this.$bus直接用。

新建bus-plugin.js：

import Vue from 'vue'
const Bus = new Vue() // 创建唯一的Bus实例
// 用mixin给所有组件的beforeCreate钩子注入$bus
Vue.mixin({
  beforeCreate() {
    this.$bus = Bus 
  }
})
export default Bus // 导出插件，也可以不导出，只要main.js引入就行

在main.js里引入插件：

import Vue from 'vue'
import App from './App.vue'
import BusPlugin from './bus-plugin.js'
Vue.use(BusPlugin) // 安装插件
new Vue({
  render: h => h(App)
}).$mount('#app')

任何组件里直接用this.$bus：

组件A（发消息）：

export default {
  methods: {
    sendMsg() {
      this.$bus.$emit('send-data', '新内容')
    }
  }
}

组件B（收消息）：

export default {
  created() {
    this.$bus.$on('send-data', (data) => {
      console.log('收到：', data)
    })
  },
  beforeDestroy() {
    this.$bus.$off('send-data') // 销毁事件
  }
}

这种方式不用重复导入，代码更简洁，适合项目里多处用Bus的场景。

Vue2 Bus的实用场景举例

光说原理太虚，看几个实际开发中能用到的场景：

兄弟组件通信

比如页面有<Header>和<Footer>两个兄弟组件，Header里有个“切换主题”按钮，点击后Footer要跟着换样式，用Bus就很方便：

Header组件触发事件：this.$bus.$emit('change-theme', 'dark')
Footer组件监听事件：this.$bus.$on('change-theme', (theme) => { /* 切换样式逻辑 */ })

跨多层级组件通信

假设App.vue里有个<Sidebar>，Sidebar里嵌套了<MenuItem>，MenuItem深处还有个<Button>，现在要让Button点击后，App.vue里的<Modal>弹窗显示，要是用props/$emit，得从Button一层层$emit到Sidebar，再到App.vue，太麻烦，用Bus的话：

Button组件：this.$bus.$emit('show-modal')
App.vue里的Modal组件：this.$bus.$on('show-modal', () => { /* 显示弹窗 */ })

无直接关联的组件通信

比如后台管理系统里，左侧导航栏和顶部搜索框要联动：点击导航栏的“用户管理”，顶部搜索框自动聚焦，这俩组件既不是父子也不是祖孙，用Bus完美解决：

导航栏组件：点击时this.$bus.$emit('focus-search')
搜索框组件：this.$bus.$on('focus-search', () => { this.inputRef.focus() })

Vue2 Bus容易踩的坑，怎么避？

用Bus时，这些“雷区”新手很容易踩，提前避坑能省很多调试时间：

事件重复触发（最常见！）

现象：点一次按钮，回调执行多次；组件切换后，旧组件的事件还在触发。
原因：组件销毁时，没把$on的监听事件销毁，导致重复绑定。
解决：在组件beforeDestroy钩子中，用$off销毁事件，前面例子里已经讲过，一定要记得加！

事件名拼写错误

现象：明明触发了事件，监听组件却收不到。
原因：$emit和$on的事件名没对应上（比如一个写了sendData，一个写了send-data）。
解决：用常量统一管理事件名！比如建个event-types.js：

export const SEND_DATA = 'send-data'

组件里导入常量：

import { SEND_DATA } from './event-types.js'
// 触发：this.$bus.$emit(SEND_DATA, ...)
// 监听：this.$bus.$on(SEND_DATA, ...)

数据延迟或不响应

现象：触发事件后，监听组件没及时收到数据；或者数据更新了，页面没变化。
原因：Bus是事件驱动，若在mounted之后才$on，可能错过之前的$emit；或者传递的非响应式数据（比如普通对象，修改后视图不更新）。
解决：

尽量在created钩子中$on，确保组件初始化时就监听。
传递响应式数据：可以用Vue的observable（Vue2）把数据包一层，或者用Vuex管理状态。

全局Bus的“污染”问题

现象：项目大了，事件越来越多，根本搞不清哪个组件在发、哪个在收，维护成本爆炸。
解决：Bus只适合中小项目/简单场景，如果项目复杂度上升，果断换Vuex/Pinia这类专门的状态管理工具，它们有清晰的“数据流向”和“状态管理规则”，长期维护更友好。

Vue2 Bus的替代方案有哪些？

如果Bus满足不了需求，或者项目要升级，这些方案可以选：

Vuex（官方状态管理库）

适合中大型项目，能统一管理全局状态，有state（存数据）、mutation（同步改数据）、action（异步改数据）这套规范，数据流向清晰，但学习成本比Bus高，小项目用它有点“重”。

Pinia（Vuex的“下一代”）

Vue3推荐的状态管理工具，Vue2也能通过适配包使用，它比Vuex更轻量，语法更简洁（不用写mutation，直接修改状态），适合新项目或想升级技术栈的团队。

Provide/Inject（Vue内置API）

Vue2.2+支持的特性，祖先组件用provide提供数据，后代组件用inject接收，适合多层级但通信不频繁的场景，比如主题配置、全局配置项，但要注意：默认传递的是非响应式数据，若要响应式，得用函数返回对象或者结合Vue.observable。

自定义事件管理类

如果觉得Bus不够灵活，可以自己写个事件管理类，封装on、emit、off方法，类似：

class EventEmitter {
  constructor() {
    this.events = {}
  }
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = []
    }
    this.events[eventName].push(callback)
  }
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(cb => cb(...args))
    }
  }
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb!==callback)
    }
  }
}
export default new EventEmitter()

这种方式完全自主可控，适合对Bus功能做定制化的项目。

说到底，Vue2 Bus是个“轻量又灵活”的跨组件通信工具，但它不是银弹——小项目、简单通信场景用它效率高；项目大了、通信复杂了，就得换更专业的工具，关键是根据项目规模和需求选对方案，再结合规范（比如事件名用常量、及时销毁事件）避免踩坑，希望这篇内容能让你对Vue2 Bus从“懵圈”变“顺手”，下次遇到组件通信难题,能快速选对方法～