探讨基于@umijs/plugin-qiankun搭建的微应用的父子应用通讯方式

最新推荐文章于 2025-05-27 21:39:09 发布

云之前端

最新推荐文章于 2025-05-27 21:39:09 发布

阅读量818

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_44586361/article/details/131327942

版权

文章介绍了在umijs/plugin-qiankun框架下，如何实现父子应用之间的通讯。主要方法包括通过MicroApp组件的props直接传递数据，使用useQiankunStateForSlave函数绑定路由状态，以及通过子应用的生命周期钩子获取props。此外，还提到了使用useModel和connectMaster高阶组件来消费主应用传递的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

承接上篇文章（如何使用@umijs/plugin-qiankun搭建微前端项目）后续，下面我们探讨一下父子应用通讯的几种实现方式。

配合useModel使用

需确保已安装 @umijs/plugin-model 或 @umijs/preset-react

主应用透传数据方式

1.使用MicroApp组件模式消费微应用，直接使用props传递即可。如下给子应用传递test数据：

<MicroApp name={
   "subApp1"} autoSetLoading test="测试数据"/>

2.使用路由绑定式消费微应用，需要在src/app.ts导出一个useQiankunStateForSlave函数，函数的返回值将作为props传递给微应用。

export function useQiankunStateForSlave() {
   
  const [masterState, setMasterState] = useState({
   });

  return {
   
    masterState,
    setMasterState,
  };
}