Vue自定义事件仅适用于子→父组件通信，微前端跨沙箱广播需用CustomEvent+window API：主子应用通过window.dispatchEvent和addEventListener收发事件，统一事件名、手动清理监听；封装bus.js提升可维护性；$emit/$on因Vue实例隔离无法跨应用使用。
Vue 自定义事件本身只适用于组件层级通信（子→父），不能直接用于微前端主应用与子应用之间的跨沙箱广播。要实现微前端场景下的事件广播，必须跳出 Vue 组件生命周期，借助全局上下文（如 window）和标准 Web API —— 也就是 CustomEvent + dispatchEvent / addEventListener。
用 CustomEvent 实现跨应用广播（推荐方案）
这是最轻量、不依赖框架、天然支持沙箱隔离的方案。主应用和各 Vue 子应用都通过 window 对象收发事件，彼此解耦：
- 统一约定事件名（建议全小写 + 中划线，如 'user-login' 或 'route-change'）
- 发送方调用 window.dispatchEvent(new CustomEvent('xxx', { detail: data }))
- 接收方用 window.addEventListener('xxx', handler) 监听，从 event.detail 取数据
- 注意在组件卸载或子应用 unmount 时手动移除监听，避免内存泄漏：window.removeEventListener
在 Vue 子应用中封装广播逻辑（提升可维护性）
不要每次都在组件里写原生 event API。可在子应用入口或工具模块中封装一个简易 EventBus：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 创建 bus.js（纯 JS，不依赖 Vue）：
window.dispatchEvent(new CustomEvent(type, { detail: payload }));
};
export const listen = (type, handler) => {
const fn = (e) => handler(e.detail);
window.addEventListener(type, fn);
return () => window.removeEventListener(type, fn); // 返回卸载函数
};
- 在 Vue 组件中使用：
export default {
mounted() {
this.unsub = listen('theme-change', (data) => {
this.theme = data.mode;
});
},
beforeUnmount() {
if (this.unsub) this.unsub();
},
methods: {
triggerTheme() {
broadcast('theme-change', { mode: 'dark' });
}
}
};
为什么不用 Vue 的 $emit / $on？
因为 Vue 实例彼此隔离：主应用的 Vue 实例和子应用的 Vue 实例完全独立，$emit 触发的事件无法穿透实例边界；即使你用全局 Vue.prototype.$bus，也仅限同一 Vue 应用内有效。微前端中每个子应用是独立挂载、独立销毁的，强行共享 Vue 实例会破坏沙箱完整性，且在 qiankun 等框架下可能被拦截或失效。
立即学习“前端免费学习笔记（深入）”；
进阶建议：配合微前端框架做生命周期对齐
以 qiankun 为例，在子应用的 mount 钩子中注册监听，在 unmount 钩子中清理监听；主应用可在全局状态变更（如用户登录）后主动 broadcast。这样能确保事件监听始终与子应用生命周期同步，避免“监听已卸载子应用的事件”这类异常。
