EventBus是JavaScript层面的发布-订阅模式实现，非HTML原生能力，需通过new Vue()或EventTarget创建中央事件中心，并严格匹配事件名、生命周期和作用域。
HTML 本身不支持事件总线，必须靠 JavaScript 实现
事件总线（EventBus）不是 HTML 原生能力，也不是 DOM 规范的一部分。它纯粹是 JS 层面的模式——用一个空的 Vue 实例或 EventTarget 实例充当中央消息中转站。如果你直接在纯 HTML 文件里写 <button onclick="bus.$emit('msg', 'hello')"></button>，浏览器会报 ReferenceError: bus is not defined，因为 bus 根本没声明，更没挂载。
所以第一步永远是：先创建总线实例，并确保它在所有要用它的脚本执行前已存在。
- Vue 2 项目中常用
export const EventBus = new Vue()或Vue.prototype.$EventBus = new Vue() - 纯 HTML + JS 场景下，可改用原生
const bus = new EventTarget()，然后用bus.dispatchEvent()和bus.addEventListener() - 千万别把总线定义放在某个组件
<script></script>块末尾——兄弟组件加载顺序不确定，容易出现bus.$on还没注册就$emit了
Vue 2 中用 EventBus 实现兄弟组件通信的关键写法
Vue 组件间通信若无父子关系，EventBus 是轻量解法，但必须严格匹配 $emit 和 $on 的事件名、调用时机与作用域。
-
bus.$emit('chat-send', {from: 'A', text: this.msg})发送时，事件名要全小写+短横线（如chat-send），避免大小写混淆 -
mounted()钩子中注册bus.$on，不能写在created—— 此时 DOM 可能未就绪，且this指向不稳定；用箭头函数或缓存const that = this避免监听回调里this失效 - 务必在组件
beforeDestroy（Vue 2）中调用bus.$off('chat-send')，否则重复加载组件会导致同一事件被监听多次 - 不要在模板里直接调用
bus.$emit，例如@click="bus.$emit(...)"——bus不在组件实例作用域内，会报错
纯 HTML + 原生 JS 如何模拟 EventBus 行为
不用框架也能实现类似效果，核心是用 EventTarget 替代 Vue 实例。它比自己写发布订阅对象更可靠，且兼容现代浏览器（Chrome 64+、Firefox 60+、Safari 12.1+）。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“前端免费学习笔记（深入）”；
- 定义总线：
const bus = new EventTarget() - 发送消息：
bus.dispatchEvent(new CustomEvent('user-login', {detail: {id: 123, token: 'abc'}})) - 监听消息：
bus.addEventListener('user-login', e => console.log(e.detail)) - 注意：原生
CustomEvent的数据必须塞进detail字段，不能直接传对象 —— 否则 IE 和旧版 Safari 会失败 - 如果需兼容 IE，得回退到手动维护事件数组 +
forEach触发，但代码膨胀且易漏清理
为什么 EventBus 容易出问题？三个高频坑
看似简单，实际踩坑率极高。最常发生的不是语法错，而是生命周期和作用域错位。
- 事件名拼错或大小写不一致：发的是
'dataUpdate'，监听的是'dataupdate'，静默失败，控制台无报错 - 监听逻辑写在
data()函数里而非mounted()，导致每次数据重置都新增一次监听，点击一次触发 N 次 - 在单页应用中切换路由后未清理监听器，旧组件卸载了但
$on还挂着，新组件一发事件，老组件的回调仍执行（内存泄漏 + 逻辑错乱）
真正稳定的通信方案，要么升级到 Vuex/Pinia 管理状态，要么直接用 props/emits + v-model 在父子链上传递 —— EventBus 只适合临时、低频、非关键路径的解耦，别当主干用。
