qiankun 微前端事件通信指南：4 种场景一次讲清-云帆数科

qiankun 微前端事件通信指南4 种场景一次讲清【免费下载链接】qiankun Blazing fast, simple and complete solution for micro frontends.项目地址: https://gitcode.com/gh_mirrors/qi/qiankunqiankun 微前端事件通信绕不开一个现实主应用和微应用各跑在独立的 JS 沙箱里window互相隔离数据必须走显式通道。本文按初始化传值、运行时喊话、全局状态共享、浏览器原生通道 4 个场景递进把该用的手段一次讲清。① 初始化阶段把数据塞进微应用最简单的通信发生在加载那一刻loadMicroApp的props参数。主应用把数据和回调函数一次传入微应用在mount生命周期接收。// 主应用 const app loadMicroApp({ name: profile, entry: //localhost:8080, container, props: { user, onSignOut: signOutCurrentUser }, }); // 微应用 export async function mount(props) { renderProfile(props.container, { user: props.user }); props.onSignOut; // 回调也在 props 里 }注意这里props是挂载时的一次性快照之后变了不会自动推送。数据后续变化要走update推新快照回调则给微应用留了一条上报的单向通道。② 运行时让任意应用喊话给其他应用框架内事件props 注入事件总线qiankun v3 不再内置 2.x 时代的全局状态 API官方推荐的喊话方式是主应用创建一个事件总线实例通过props传给各微应用。总线可以用 mitt 或原生EventTarget接口统一是派发事件订阅事件。// 主应用 const bus mitt(); loadMicroApp({ name: profile, entry, container, props: { bus } }); // 微应用mount 时订阅unmount 时移除 bus.on(logout, onLogout); bus.emit(tab-changed, { activeId: orders });这条路线事件名和负载都由主应用集中约定类型上好约束卸载时务必移除监听器否则卸载的应用会被总线一直持有。DOM 层事件CustomEvent如果不想引第三方库或者微应用内部已经用document事件做内部解耦可以直接在document上派发自定义事件主应用监听同名事件即可。适合发出去不用回音的松耦合通知主应用只依赖事件名不依赖微应用导出了什么。缺点是事件名是字符串约定、没有类型约束负载复杂时不如总线好治理。③ 全局状态多个微应用共享同一份数据你可能会问既然 props 能传数据为什么还专门搞共享状态因为props传不了动态状态——它只在挂载时是快照登录态、购物车这类持续变化的数据靠反复调update推快照既不优雅也容易漏。解法是主应用持有一份 store通过props把 store 和 dispatch 发给每个微应用大家读写同一份数据。Redux、Zustand 或自写订阅器都行qiankun 不限制具体实现。// 主应用 const store createStore(rootReducer); loadMicroApp({ name: profile, entry, container, props: { store, dispatch: store.dispatch } }); // 微应用 let unsubscribe; export async function mount({ store, dispatch }) { render(store.getState()); unsubscribe store.subscribe(render); dispatch({ type: USER_LOGIN, payload: { name: Ada } }); } export async function unmount() { unsubscribe?.(); }注意这里的清理义务订阅注册在主应用的 store 上unmount里不调unsubscribe卸载的应用就会被监听器持有内存泄漏就是这么来的。④ 脱离框架BroadcastChannel 跨上下文通信BroadcastChannel是浏览器原生通道零 qiankun API 依赖同源的不同上下文页面、iframe、Worker、甚至其他标签页都能收到消息。它特别适合混合架构主应用里既有 qiankun 加载的 ESM 微应用又有 iframe 子应用或者把重计算放进了 Web Worker。// 主应用与微应用 / iframe 子应用各建同名 channel const channel new BroadcastChannel(app-bus); channel.postMessage({ type: USER_LOGOUT }); channel.onmessage (e) console.log(e.data);两个约束消息载荷必须可序列化跨上下文的消息 schema 建议像props类型一样明确约定方便排查和演进。⑤ 怎么选一张表说清方案通信方向是否依赖 qiankun典型场景一句话优劣props传递主 → 微回调反向是初始化数据、上报回调最显式好治理仅挂载时生效单向事件总线props 注入应用间任意方向总线实例由主应用创建运行时通知、多应用响应同一事件双向灵活、事件名可集中约定订阅要手动清理共享 storeRedux / Vuex 思路围绕主应用的单一数据源否任何状态库登录态、购物车等持续变化的全局状态状态有唯一归属需自行管理订阅与取消BroadcastChannel同源跨上下文广播完全独立混合架构qiankun iframe / Web Worker零依赖、能跨标签页消息必须可序列化实际项目里通常是组合拳props打底传初始数据事件总线负责运行时通知复杂状态交给主应用的 store边界上再嵌了 iframe 就用BroadcastChannel。判断标准只有一条——状态和事件的归属要唯一微应用只拿它需要的接口而不是共享一整个window。更多通信约定见官方文档。【免费下载链接】qiankun Blazing fast, simple and complete solution for micro frontends.项目地址: https://gitcode.com/gh_mirrors/qi/qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业数字化 ERP 产品动态

相关推荐

明日方舟一键日常怎么做到的：MaaAssistantArknights 从截图到点击的四层拆解

明日方舟一键日常怎么做到的：MaaAssistantArknights 从截图到点击的四层拆解【免费下载链接】MaaAssistantArknights 《明日方舟》小助手，全日常一键长草！| A one-click tool for the daily tasks of Arknights, supporting all clients. … · 2026/11/1 1:35:17

AssetStudio：文件夹拖进去，贴图、模型、音频全变标准格式——Unity 资源提取实战指南

AssetStudio：文件夹拖进去，贴图、模型、音频全变标准格式——Unity 资源提取实战指南【免费下载链接】AssetStudio AssetStudio is a tool for exploring, extracting and exporting assets and assetbundles. 项目地址: https://gitcode.com/gh_mirr… · 2026/11/1 1:34:17

Transformer的⼯作流程

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 6:28:21

Android 2048小游戏源码拆解：自定义View、手势与合并算法

简介：这份资源是面向计算机相关专业本科生、尤其是准备撰写毕业设计的同学的一份完整学位论文文档，选题为基于 Android 平台的 2048 小游戏设计与实现，适合处于选题开题、结构搭建、内容填充与答辩准备阶段的读者参考，也可作为软件… · 2026/11/3 15:59:03

机器人产业爆发：技术突破与量产挑战

1. 行业变革：机器人产业迎来爆发临界点当特斯拉宣布停产部分传统车型、将产线转向人形机器人Optimus生产时，整个制造业的震动不亚于当年福特T型车量产带来的产业革命。根据内部流出的生产规划，Optimus目标年产能已锁定百万台级别，… · 2026/11/3 15:59:03

超声波测速实验原理与工程应用详解

1. 实验背景与原理超声波测速实验是大学物理实验中一个经典且实用的项目，通过这个实验我们能够直观理解声波在介质中的传播特性。声速作为声波传播的重要参数，在医学超声诊断、工业无损检测、水下声呐等领域都有广泛应用。声波在空气中的传播速度并非固定… · 2026/11/3 15:59:03

C++ list底层实现与优化实践指南

1. 为什么需要理解list的底层实现作为一名C开发者，我经常被问到：标准库已经提供了完善的list容器，为什么还要研究它的底层实现？这个问题让我想起了十年前刚入行时的困惑。当时我只会调用list的接口，直到在一次性能调优… · 2026/11/3 15:59:03

hindsight不是工具，是程序员的技术债自嘲术语

1. “Hindsight”不是工具名，而是开发者对技术债的集体自嘲最近在几个技术社区刷到“hindsight”这个词，频率高得有点反常——它既不在PyPI上注册，也不在npm registry里可搜，Docker Hub里查不到官方镜像，OpenAI文档里更… · 2026/11/3 15:59:03