Vue的$emit和$on方法如何实现事件总线？

事件总线是通过一个全局 vue 实例作为中转站，实现组件间松耦合通信的方式。1. 事件总线本质是一个独立的 vue 实例，用于在不同组件之间传递事件和数据；2. 创建时只需新建一个 vue 实例并在各组件中引入；3. 使用 $emit 触发事件、$on 监听事件完成跨层级或非父子组件通信；4. 应在组件销毁前使用 $off 移除监听以避免内存泄漏；5. 需注意事件命名避免冲突，推荐添加命名空间；6. 虽适合中小型项目或临时通信，但大型项目建议用 vuex 等状态管理方案替代。

在 Vue 中，父子组件之间的通信可以通过 props 和 $emit 实现，但如果想跨层级甚至非父子关系的组件之间通信，就需要用到事件总线（Event Bus）。而实现事件总线的核心方法就是

$emit

和

$on

。

什么是事件总线？

事件总线本质上是一个全局的 Vue 实例，用来作为不同组件之间传递事件和数据的“中间人”。通过它，组件可以不依赖父子关系也能进行通信。

简单来说，就是：

立即学习“前端免费学习笔记（深入）”；

• 某个组件通过

  $emit

  在事件总线上触发一个事件

• 另一个组件通过

  $on

  监听这个事件并做出响应

这非常适合处理非父子、兄弟组件之间或者深层次嵌套组件之间的通信。

如何创建事件总线？

创建事件总线其实很简单，只需要创建一个新的 Vue 实例即可：

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

然后你可以在任何组件中引入这个

EventBus

并使用

$on

和

$emit

来监听和触发事件。

如何使用 $on 和 $emit 进行通信？

假设我们有两个组件 A 和 B，它们没有直接的父子关系，但希望组件 A 发送消息给组件 B。

组件 B 监听事件

在组件 B 的

mounted

生命周期钩子中监听某个事件，比如叫

message-received

：

import { EventBus } from './event-bus'  export default {   mounted() {     EventBus.$on('message-received', (message) => {       console.log('收到消息:', message)     })   } }

组件 A 触发事件

在组件 A 的某个方法里，使用

$emit

向事件总线发送消息：

import { EventBus } from './event-bus'  export default {   methods: {     sendMessage() {       EventBus.$emit('message-received', 'Hello from Component A')     }   } }

这样，当组件 A 调用

sendMessage

方法时，组件 B 就会接收到这条消息。

使用事件总线需要注意的问题

虽然事件总线用起来方便，但在实际开发中也有一些需要注意的地方：

• 避免滥用：如果项目结构复杂，建议使用 Vuex 等状态管理方案替代事件总线，否则容易造成代码难以维护。

• 及时清理监听器：在组件销毁前务必移除监听，防止重复执行或内存泄漏。例如：

  beforeDestroy() {   EventBus.$off('message-received') }

• 命名冲突风险：多个地方使用相同事件名可能会导致逻辑混乱，建议给事件加上命名空间或模块前缀，比如

  'user-login-success'

  。

总结一下

用

$emit

和

$on

搭建事件总线其实就是借助一个独立的 Vue 实例来作为中转站，实现组件间松耦合的通信方式。虽然不是最推荐用于大型项目的通信手段，但在中小型项目或者临时通信场景下非常实用。

基本上就这些了，用的时候注意别忘记解绑监听、避免事件名冲突就行。