Vue 3 自定义事件无法实现主子应用跨应用广播，因微前端中主子应用隔离运行；可行方案有三：1. CustomEvent + window 全局事件；2. mitt 挂载到 window 的事件总线；3. 微前端框架提供的 props 透传回调。
Vue 3 自定义事件本身不直接支持跨应用广播，它只在单个组件实例或父子组件间有效。在微前端架构中，主应用与子应用是隔离运行的独立 JavaScript 执行上下文（不同 Vue 实例、甚至不同框架），$emit 或 defineEmits 发出的事件无法穿透边界被对方监听。因此，不能靠 Vue 原生自定义事件实现主子应用间的事件广播。
真正可行的跨应用事件广播方式
需要使用脱离 Vue 实例、全局可访问的通信机制。主流且推荐的有以下三类：
-
CustomEvent + window 全局事件系统：标准、轻量、跨框架，适合通知类广播（如“用户登出”“主题切换”“配置更新”）。主应用用
window.dispatchEvent广播，所有子应用用window.addEventListener监听。需注意手动序列化数据（JSON.stringify）、避免命名冲突、清理监听器防止内存泄漏。 -
独立事件总线（如 mitt）挂载到 window 上：比原生 CustomEvent 更灵活，支持通配符、批量移除、异步事件等。推荐做法是主应用初始化一个 mitt 实例并赋值给
window.__EVENT_BUS__，子应用启动时读取并复用，确保共用同一总线实例。 -
qiankun / wujie 等微前端框架提供的生命周期钩子与 props 透传：适用于“主 → 子”的单向下发（如权限、用户信息、国际化 locale）。主应用通过
props将事件回调函数传入子应用，子应用调用该函数即完成“反向通知”。这不是广播，但语义清晰、类型安全、无全局污染，适合强耦合场景。
为什么不建议用 Vue2 风格的 EventBus（new Vue()）
这种写法在 Vue3 中已不可行——Vue3 废除了全局事件 API（$on/$off/$emit），且 new Vue() 已被移除。即使强行引入兼容包，也会因子应用运行在沙箱环境（如 qiankun 的 proxy 沙箱）中，导致事件总线无法被主应用或其他子应用访问，实际失效。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
实际广播流程示例（CustomEvent）
主应用广播：
const data = { theme: 'dark', timestamp: Date.now() };
window.dispatchEvent(new CustomEvent('main-theme-change', {
detail: data,
bubbles: false,
cancelable: false
}));子应用监听（需在 mounted 或 onMounted 中注册，onUnmounted 中移除）：
const handleThemeChange = (e) => {
console.log('收到主题变更', e.detail);
// 更新本地状态或样式
};
window.addEventListener('main-theme-change', handleThemeChange);
// 卸载时清理
onUnmounted(() => {
window.removeEventListener('main-theme-change', handleThemeChange);
});前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
