可用CustomEvent+window实现子应用松耦合通信，需加前缀防冲突、卸载时移除监听，并在qiankun沙箱中通过主应用暴露eventBus兼容；适用于登录广播等通知场景，不适用于高频状态同步。
可以用浏览器原生的 CustomEvent 搭配全局 window 对象来实现子应用间的松耦合通信，不需要框架依赖，也天然支持跨技术栈（Vue/React/Angular）。
用 CustomEvent 做广播通知
主应用或某个子应用触发自定义事件，其他子应用监听该事件并响应。关键在于统一使用 window 作为事件调度中心，避免各子应用各自创建事件实例导致隔离失效。
- 发送方（比如用户中心登录成功后）：
// 触发事件，携带数据window.dispatchEvent(new CustomEvent('user-login', { detail: { id: 123, name: 'Alice' } }));
- 接收方（比如订单管理、商品管理）：
// 监听事件，注意在卸载时移除监听
const handleLogin = (e) => console.log('收到登录信息：', e.detail);<br>window.addEventListener('user-login', handleLogin);<br>// 子应用 unmount 时调用：<br>window.removeEventListener('user-login', handleLogin);
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
避免命名冲突和内存泄漏
多个子应用共用 window 空间，容易因事件名重复或监听未清理造成干扰。
- 建议给事件加前缀，例如
app1:user-login、app2:cart-update - 子应用挂载时注册监听，卸载时必须同步移除——这是 qiankun 沙箱生命周期中常被忽略的一环
- 可封装一个轻量工具函数，自动绑定/解绑，减少手动出错概率
配合沙箱环境做兼容处理
qiankun 等框架默认启用 JS 沙箱，会代理 window 访问。直接 window.addEventListener 在某些版本中可能失效。
- 推荐在主应用中提前暴露一个统一的事件管理器到
window，例如：window.eventBus = { on: ..., emit: ... }; - 子应用统一通过
window.eventBus.on('xxx', cb)订阅，主应用负责确保该对象在沙箱内外都可访问 - 若子应用运行在 iframe 中，则需改用
postMessage，但 CustomEvent 本身不支持跨 iframe
适合什么场景
CustomEvent 不适合传大量数据或频繁更新状态，它本质是“通知机制”，不是状态同步方案。
- ✅ 用户登录/登出广播
- ✅ 主题切换通知
- ✅ 表单提交成功后刷新其他模块列表
- ❌ 同步购物车实时数量（建议用全局 state 或 props）
- ❌ 多个子应用协同编辑同一份表单数据（需更严谨的状态管理）
