---
title: Vue事件总线EventBus使用逻辑和原理总结
description: Vue事件总线（EventBus）是一种在 Vue.js 应用中用于组件之间进行非父子通信的机制。它不是 Vue 官方提供的功能，而是一种基于 Vue 自定义事
author: chaihongjun
category: frontend
published: 2024-11-29
url: https://chaihongjun.me/frontend/31.html
---

# Vue事件总线EventBus使用逻辑和原理总结

Vue事件总线（EventBus）是一种在 Vue.js 应用中用于组件之间进行非父子通信的机制。它不是 Vue 官方提供的功能，而是一种基于 Vue 自定义事件的常用模式

使用方法

1. 首页创建事件总线实例：
MDBLOCK0
可以看出来事件总线实例实际就是Vue实例。

2. 然后在组件中使用$emit触发事件：

当你想要通知其他组件某些事情发生时，你可以使用 $emit 方法并传递事件名称以及需要发送的数据。
MDBLOCK1
3. 在另外的组件使用$on注册订阅事件：

MDBLOCK2
4.(可选)在组件销毁时移除事件监听：
MDBLOCK3
注意注册和销毁都是在同一个组件内。

原理

Vue事件总线的原理基于 Vue 的自定义事件系统。以下是它的工作原理

1. 事件触发：使用 $emit 方法可以触发当前组件实例上的事件。如果你传递一个事件名称作为参数，Vue 将会检查是否有事件监听器被附加到这个名称上，如果有，它会调用这些监听器，并传递给它们额外的参数。

2. 事件监听：使用 $on 方法可以监听一个事件，当你触发这个事件时，所有监听这个事件的监听器都会被调用。

3. 事件总线实例：事件总线是一个独立的 Vue 实例，因此它拥有 $emit、$on 和 $off 方法。任何组件都可以通过这个共享的 Vue 实例来通信，这就实现了跨组件的通信。

使用事件总线时，要注意几个问题：

优点

1. 解耦：组件之间不需要直接引用，可以通过事件总线解耦。

2. 简单易用：实现简单，适合小型应用。

3. 灵活性：可以随时添加、移除事件。

缺点

1. 避免过多使用事件总线，因为它会让组件之间的耦合度增加，使得应用难以维护。

2. 确保在组件销毁时移除事件监听，防止内存泄漏。

3. 考虑使用 Vuex 进行状态管理，如果组件间的通信涉及到状态的共享和变更。

事件总线是 Vue.js 中一种简单而有效的组件间通信方式，适用于小型应用或项目。通过创建一个 Vue实例来作为事件管理器，组件可以通过它轻松地发送和接收事件。在使用时要注意内存管理，避免潜在的内存泄漏问题。如果项目逐渐变得复杂，考虑使用 Vuex 作为状态管理解决方案。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/31.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。