Vue自定义事件仅限父子组件通信，跨组件需用事件总线（EventBus）中转；推荐单独创建eventBus.js导出纯净Vue实例，发送方用$emit、接收方用$on监听并及时$off卸载，轻量场景适用，复杂状态管理应选Pinia等方案。
Vue 自定义事件本身只在父子组件间生效（$emit 触发、props 或 $on 监听），无法直接用于非父子组件通信。要让自定义事件“跨出去”，必须借助事件总线（EventBus）作为中转站——它把原本受限的父子通信机制，扩展成全局可订阅、可触发的消息通道。
创建一个可复用的事件总线实例
推荐单独建一个 eventBus.js 文件，导出一个纯净的 Vue 实例：
src/utils/eventBus.js
import Vue from 'vue'<br>export const EventBus = new Vue()
立即学习“前端免费学习笔记（深入）”；
这样做的好处是：解耦明确、按需导入、避免污染原型链。不建议直接挂到 Vue.prototype（尤其在 Vue 3+ 项目或大型工程中易引发命名冲突和内存泄漏）。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
在发送方组件中触发带数据的自定义事件
引入总线，用 $emit 发送事件名和任意有效载荷（字符串、对象、数组等）：
- 确保在方法中调用，比如按钮点击时
- 事件名建议使用语义化小写短横线格式（如
'user-login-success'），避免拼写歧义 - 数据可直接传入，无需包装成对象（除非多字段）
import { EventBus } from '@/utils/eventBus'<br>export default {<br> methods: {<br> handleClick() {<br> EventBus.$emit('notify-sidebar-open', { panel: 'settings', active: true })<br> }<br> }<br>}
在接收方组件中监听并响应事件
同样导入总线，在生命周期钩子（通常是 mounted）中监听；务必在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中取消监听，防止内存泄漏：
- 监听回调函数内可修改
data、调用methods、触发computed更新 - 多个组件监听同一事件互不影响，符合发布-订阅模式特性
- 若需只响应一次，可用
$once替代$on
import { EventBus } from '@/utils/eventBus'<br>export default {<br> data() { return { isOpen: false } },<br> mounted() {<br> EventBus.$on('notify-sidebar-open', ({ panel }) => {<br> this.isOpen = panel === 'settings'<br> })<br> },<br> beforeUnmount() {<br> EventBus.$off('notify-sidebar-open')<br> }<br>}
注意边界与替代时机
事件总线适合轻量、临时、低耦合的跨组件通知（如弹窗开关、表单重置、局部刷新）。但遇到以下情况，应考虑更健壮的方案：
- 多个组件频繁读写同一状态 → 改用 Pinia 或 Vuex
- 需要服务端同步、持久化、时间旅行调试 → 必须上状态管理库
- 事件名分散、难以追溯来源 → 建议统一管理事件常量文件（如
eventTypes.js） - Vue 3 中已移除
$on/$off，需用mitt或tiny-emitter等轻量替代库
