跳到主要内容

通信

2023年08月15日
柏拉文
越努力，越幸运

一、microApp.setData And microApp.addEventListener​

当页面中只有几处使用 MicroApp 时， 可以直接通过 microApp.setData And microApp.addEventListener 发送和接收数据。

1.1 主应用 microApp.setData 发送数据​

import microApp from '@micro-zoe/micro-app'

// 发送数据给子应用 my-app，setData第二个参数只接受对象类型
microApp.setData('my-app', {type: '新的数据'})

1.2 子应用 microApp.addEventListener 接收数据​

import microApp from '@micro-zoe/micro-app'

function dataListener (data) {
  console.log('来自子应用my-app的数据', data)
}

microApp.addDataListener('my-app', dataListener)

注意: 一定要及时调用 microApp.removeDataListener(dataListener) 或者 microApp.clearDataListener 清除监听函数。原因: 因为监听函数式是挂在 window 下的，当前页面来回跳转后，会重复注册这个监听函数，导致多个监听函数调用多次。

二、microApp.setData And EventCenterForMicroApp.addEventListener​

当页面中多处使用 MicroApp 时， 这时候通过 microApp.setData And microApp.addEventListener 发送和接收数据时，子应用无法响应数据变化，也没有报错，子应用打印window.microApp也正常。这时候可以通过 microApp.setData And EventCenterForMicroApp.addEventListener 在 MicroApp 中自定义事件中心来实现。

1.1 主应用 microApp.setData 发送数据​

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'
import microApp, { EventCenterForMicroApp } from '@micro-zoe/micro-app'

// MicroApp 注册函数，全局执行一次
microApp.start({
  ………
});
// MicroApp 注册之后，创建子应用事件中心
window.eventCenterForApp1 = new EventCenterForMicroApp('app-1')

// 在 onMounted 生命周期中通过 setData 发送数据
<micro-app 
  name="app-1" 
  url="http://localhost:3000" 
  onMounted={()=> { microApp.setData('my-app', {type: '新的数据'}) }}
>
</micro-app>

1.2 子应用 EventCenterForMicroApp.addEventListener 接收数据​

window?.eventCenterForApp1.addDataListener((data) => {
  console.log("data", data)
}, true)

注意: 一定要及时调用 EventCenterForMicroApp.removeDataListener(dataListener) 或者 EventCenterForMicroApp.clearDataListener 清除监听函数。原因: 因为监听函数式是挂在 window 下的，当前页面来回跳转后，会重复注册这个监听函数，导致多个监听函数调用多次。