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

承接上篇文章（如何使用@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,
  };
}

子应用获取数据方式

1.子应用中会生成一个全局model，可以使用useModel获取主应用透传的props。

import { useModel } from 'umi';

function MyPage() {
  const masterProps = useModel('@@qiankunStateFromMaster');
  console.log('props', masterProps)
  return <div>{JSON.stringify(masterProps)}</div>;
}

2.过高阶组件 connectMaster 来获取主应用透传的 props

import { connectMaster } from 'umi';

function MyPage(props) {
  console.log('props', props)
  return <div>{JSON.stringify(props)}</div>;
}

export default connectMaster(MyPage);

基于props传递

主应用配置apps时，以props将数据传递下去

   apps: [
     {
       name: 'subApp1',
       entry: 'http://localhost:8001',
       props: {
         onClick: (event) => console.log(event),
         name: 'xx',
         age: 1,
       },
     },
   ],

子应用在生命周期钩子中获取 props 消费数据

// src/app.ts
export const qiankun = {
	//应用加载之前
	async bootstrap(props) {
		console.log('appl bootstrap', props);
	},
	//应用render之前触发
	async mount(props) {
		console.log('appl mount', props);
	},
	//应用卸载之后触发
	async unmount(props) {
		console.log('appl unmount', props);
	}
}