前言
上文记录了如何在项目中接入 micro-app,本文主要记录下微前端基座应用和子应用之间的数据通信。
一、 基座应用向子应用发送数据
方式1:通过 data 属性发送数据
<template>
<micro-app
name='appname-vue3'
:url='url'
baseroute='/app-vue3'
:data='microAppData' // data只接受对象类型,数据变化时会重新发送
/>
</template>
<script>
export default {
name: 'vue3',
data () {
return {
url: 'http://localhost:4009/',
microAppData: {msg: '来自基座的数据'}
}
},
}
</script>
方式2:手动发送数据
手动发送数据需要通过 name 指定接受数据的子应用,此值和 <micro-app> 元素中的 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
<template>
<micro-app
name='appname-vue3'
:url='url'
baseroute='/app-vue3'
:data='microAppData' // data只接受对象类型,数据变化时会重新发送
@datachange='handleDataChange' // 数据在事件对象的 detail.data 字段中,子应用每次发送数据都会触发 datachange
/>
</template>
<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、获取全局数据
基座应用:
import microApp from '@micro-zoe/micro-app'
// 直接获取数据
const globalData = microApp.getGlobalData() // 返回全局数据
function dataListener (data) {
console.log('全局数据', data)
}
/**
* 绑定监听函数
* dataListener: 绑定函数
* autoTrigger: 在初次绑定监听函数时如果有缓存数据,是否需要主动触发一次,默认为false
*/
microApp.addGlobalDataListener(dataListener: Function, autoTrigger?: boolean)
// 解绑监听函数
microApp.removeGlobalDataListener(dataListener: Function)
// 清空基座应用绑定的所有全局数据监听函数
microApp.clearGlobalDataListener()
子应用:
// 直接获取数据
const globalData = window.microApp.getGlobalData() // 返回全局数据
function dataListener (data) {
console.log('全局数据', data)
}
/**
* 绑定监听函数
* dataListener: 绑定函数
* autoTrigger: 在初次绑定监听函数时如果有缓存数据,是否需要主动触发一次,默认为false
*/
window.microApp.addGlobalDataListener(dataListener: Function, autoTrigger?: boolean)
// 解绑监听函数
window.microApp.removeGlobalDataListener(dataListener: Function)
// 清空当前子应用绑定的所有全局数据监听函数
window.microApp.clearGlobalDataListener()
micro-app 官网链接:MicroApp