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），仅供参考

qiankun 微前端事件通信指南：4 种场景一次讲清

相关推荐

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

DroidDeck ADB 远程控制实操：droiddeckctl 会话自动化完整上手

iOS 输入框键盘遮挡的 8 类问题逐条排查（附源码行号）

更多资讯

启动报Port 8088 was already in use？先查是谁占的

担心文档上云？本地运行的办公AI才敢放心用

先能用，再好用：从烂尾复盘到两周上线，全栈项目的‘原型—快速迭代‘方法论

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%：对照 Gemini 3 Pro 的三份能力评测，看‘会思考‘改写了哪些边界

1.c++入门篇

《江灯合声》：有可行的分框版，也仍可以选择连续鸣谢

今日更新

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？