微前端qiankun

58 阅读1分钟

首先需要在基座中注册子应用(registerMicroApps),注册需要有name名字、entry地址、container容器、activeRule激活路径、props传参等参数。 在子应用中监听state的变化(props.onGlobalStateChange),也可以修改state(props.setGlobalState)

基座接入子应用

registerMicroApps([ 
{ name: "micro-app1", // app name registered 
entry: "//localhost:3011", 
container: "#micro-app1", 
activeRule: "/micro-app1", 
props: { niceBody: "malena", age: 32 } },//传递的参数
]);

子应用接收参数

// @ts-ignore
export async function mount(props) {
  console.log('[react16] props from main framework', props);
  // render(props);
  // @ts-ignore
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });
  // @ts-ignore
  // props.setGlobalState(state);
}

子应用修改参数

props.onGlobalStateChange((state, prev) => { 
    // state: 变更后的状态; prev 变更前的状态 
    console.log(state, prev);
    // @ts-ignore 
    setTimeout(() => { 
        props.setGlobalState({...state, age: 36}) 
    }, 2000); 
});