微前端 - micro-app 数据通信

前言

上文记录了如何在项目中接入 micro-app，本文主要记录下微前端基座应用和子应用之间的数据通信。

一、基座应用向子应用发送数据

方式1：通过 data 属性发送数据


 
<script>
export default {
  name: 'vue3',
  data () {
    return {
      url: 'http://localhost:4009/',
      microAppData: {msg: '来自基座的数据'}
    }
  },
}
script>

方式2：手动发送数据

手动发送数据需要通过 name 指定接受数据的子应用，此值和元素中的 name 一致。


import microApp from '@micro-zoe/micro-app'
 
// 发送数据给子应用 appname-vue3，setData第二个参数只接受对象类型
microApp.setData('appname-vue3', {msg: '新的数据'})

二、子应用获取来自基座应用的数据

micro-app 会向子应用注入名称为 microApp 的全局对象，子应用通过这个对象和基座应用进行数据交互。

方式1：直接获取数据

const data = window.microApp.getData() // 返回基座下发的data数据

方式2：绑定监听函数


function dataListener (data) {
  console.log('来自基座应用的数据', data)
}
 
/**
 * 绑定监听函数，监听函数只有在数据变化时才会触发
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 * !!!重要说明: 因为子应用是异步渲染的，而基座发送数据是同步的，
 * 如果在子应用渲染结束前基座应用发送数据，则在绑定监听函数前数据已经发送，在初始化后不会触发绑定函数，
 * 但这个数据会放入缓存中，此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。
 */
window.microApp.addDataListener(dataListener: Function, autoTrigger?: boolean)
 
// 解绑监听函数
window.microApp.removeDataListener(dataListener: Function)
 
// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()

三、子应用向基座应用发送数据


// dispatch只接受对象作为参数
window.microApp.dispatch({type: '子应用发送的数据'})

四、基座应用获取来自子应用的数据

方式1：直接获取数据


import microApp from '@micro-zoe/micro-app'
 
const childData = microApp.getData(appName) // 返回子应用的data数据

方式2：监听自定义事件 datachange


 
<script>
export default {
  name: 'vue3',
  data () {
    return {
      url: 'http://localhost:4009/',
      microAppData: {msg: '来自基座的数据'}
    }
  },
  methods: {
    handleDataChange (e) {
      console.log('来自子应用的数据：', e.detail.data)
    }
  }
}
script>

方式3: 绑定监听函数


import microApp from '@micro-zoe/micro-app'
 
function dataListener (data) {
  console.log('来自子应用的数据', data)
}
 
/**
 * 绑定监听函数
 * appName: 应用名称
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 */
microApp.addDataListener(appName: string, dataListener: Function, autoTrigger?: boolean)
 
// 解绑监听my-app子应用的函数
microApp.removeDataListener(appName: string, dataListener: Function)
 
// 清空所有监听appName子应用的函数
microApp.clearDataListener(appName: string)

五、全局数据通信

全局数据通信会向基座应用和所有子应用发送数据，在跨应用通信的场景中适用。

1、发送全局数据

基座应用：


import microApp from '@micro-zoe/micro-app'
 
// setGlobalData只接受对象作为参数
microApp.setGlobalData({type: '全局数据'})

子应用：


// setGlobalData只接受对象作为参数
window.microApp.setGlobalData({type: '全局数据'})

2、获取全局数据