微前端应用之间如何通信?

常见方式:

  1. 主应用下发 props:qiankun 在注册子应用时通过 props 传入共享状态/方法,子应用在 mount(props) 接收
  2. 全局状态(Shared State):主应用维护一个可被各子应用 import 的 store(如基于 window 沙箱共享、或发布订阅),qiankun 提供 initGlobalState
  3. 事件总线(Event Bus / mitt):各应用订阅同一总线发消息
  4. URL / 路由参数:通过 query/state 传递
// 主应用
const actions = initGlobalState({ user: null })
actions.onGlobalStateChange((state) => console.log(state))
// 子应用
props.setGlobalState({ user: 'laowen' })

原则:通信应最小化、显式化,避免过度耦合(否则又回到巨石)。

同分类其他题目