micro-app【微前端系列教程】通信

devtools/2025/1/12 2:58:29/

主应用向子应用发送数据 setData

方式1 – 通过动态属性发送

vue

<template><micro-appname='my-app'url='xx':data='dataForChild' // data只接受对象类型，数据变化时会重新发送/>
</template><script>
export default {data () {return {dataForChild: {type: '发送给子应用的数据'}}}
}
</script>

react

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

<micro-appname='my-app'url='xx'data={this.state.dataForChild} // data只接受对象类型，采用严格对比(===)，当传入新的data对象时会重新发送
/>

方式2 – 手动发送 setData

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

  • setData 发送的数据都会被缓存下来，如果数据有变化（只会遍历第一层key）则将新旧值进行合并后发送。

  • setData 是异步执行的，多个setData会在下一帧合并为一次执行

  • setData 的第三个参数为回调函数，会在数据发送结束后执行

microApp.setData('my-app', {city: 'HK'}, () => {console.log('数据已经发送完成')
})

主应用的强制发送 forceSetData

forceSetData方法拥有和setData一样的参数和行为，唯一不同的是forceSetData会强制发送数据，无论数据是否变化。

// 强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
microApp.forceSetData('my-app', {name: 'jack'}, () => {console.log('数据已经发送完成')
})

子应用接收主应用发送的数据 getData

方式1 – getData

const data = window.microApp.getData() // 返回主应用下发的data数据

方式2 – 绑定监听函数

// 监听函数
function dataListener (data) {console.log('来自主应用的数据', data)
}// 监听数据变化
window.microApp.addDataListener(dataListener)// 监听数据变化，初始化时如果有数据则主动触发一次
window.microApp.addDataListener(dataListener, true)// 解绑监听函数
window.microApp.removeDataListener(dataListener)// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()

  • 数据监听函数有返回值时，会作为主应用中 setData 回调函数的入参

    子应用

    window.microApp.addDataListener((data) => {console.log('来自主应用的数据', data)return '返回值1'
})window.microApp.addDataListener((data) => {console.log('来自主应用的数据', data)return '返回值2'
})

    主应用

    // 返回值会放入数组中传递给setData的回调函数
microApp.setData('my-app', {city: 'HK'}, (res: any[]) => {console.log(res) // ['返回值1', '返回值2']
})

子应用向主应用发送数据 dispatch

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

  • dispatch只接受对象作为参数，它发送的数据都会被缓存下来。

  • 数据有变化（只会遍历第一层key）则将新旧值进行合并后发送

  • dispatch是异步执行的，多个dispatch会在下一帧合并为一次执行

  • dispatch第二个参数为回调函数，它会在数据发送结束后执行

    window.microApp.dispatch({city: 'HK'}, () => {console.log('数据已经发送完成')
})

子应用的强制发送 forceDispatch

forceDispatch方法拥有和dispatch一样的参数和行为，唯一不同的是forceDispatch会强制发送数据，无论数据是否变化。

// 强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceDispatch({name: 'jack'}, () => {console.log('数据已经发送完成')
})

主应用接收子应用发送的数据 getData

方式1 – getData

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

方式2 – 监听自定义事件 (datachange)

datachange 绑定函数的返回值不会作为子应用dispatch回调函数的入参，它的返回值没有任何作用。

vue

<template><micro-appname='my-app'url='xx'// 数据在事件对象的detail.data字段中，子应用每次发送数据都会触发datachange@datachange='handleDataChange'/>
</template><script>
export default {methods: {handleDataChange (e) {console.log('来自子应用的数据：', e.detail.data)}}
}
</script>

react

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

<micro-appname='my-app'url='xx'// 数据在event.detail.data字段中，子应用每次发送数据都会触发datachangeonDataChange={(e) => console.log('来自子应用的数据：', e.detail.data)}
/>

方式3 – 绑定监听函数

import microApp from '@micro-zoe/micro-app'// 监听函数
function dataListener (data) {console.log('来自子应用my-app的数据', data)
}// 监听来自子应用my-app的数据
microApp.addDataListener('my-app', dataListener)// 解绑监听my-app子应用的函数
microApp.removeDataListener('my-app', dataListener)// 清空所有监听my-app子应用的函数
microApp.clearDataListener('my-app')
  • 当数据监听函数有返回值时，会作为dispatch回调函数的入参

主应用

import microApp from '@micro-zoe/micro-app'microApp.addDataListener('my-app', (data) => {console.log('来自子应用my-app的数据', data)return '返回值1'
})microApp.addDataListener('my-app', (data) => {console.log('来自子应用my-app的数据', data)return '返回值2'
})

子应用

// 返回值会放入数组中传递给dispatch的回调函数
window.microApp.dispatch({city: 'HK'}, (res: any[]) => {console.log(res) // ['返回值1', '返回值2']
})

清空通信数据

通信的数据会被缓存，即便子应用被卸载也不会清空，必要时，需主动清空缓存数据

方式1 – clear-data

主应用中

<micro-app clear-data></micro-app>

子应用卸载时会同时清空主应用发送给当前子应用，和当前子应用发送给主应用的数据。

方式2 – clearData

主应用中

import microApp from '@micro-zoe/micro-app'// 清空主应用发送给子应用 my-app 的数据
microApp.clearData('my-app')

清空当前子应用发送给主应用的数据

子应用中

// 清空当前子应用发送给主应用的数据
window.microApp.clearData()

全局数据通信

向主应用和所有子应用发送数据

发送全局数据

主应用发送全局数据

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

子应用发送全局数据

// setGlobalData只接受对象作为参数
window.microApp.setGlobalData({type: '全局数据'})
  • setGlobalData只接受对象作为参数，它发送的数据都会被缓存下来。
  • 数据有变化（只会遍历第一层key）则将新旧值进行合并后发送。
  • setGlobalData是异步执行的，多个setGlobalData会在下一帧合并为一次执行
  • setGlobalData第二个参数为回调函数，它会在数据发送结束后执行
microApp.setGlobalData({city: 'HK'}, () => {console.log('数据已经发送完成')
})

强制发送 forceSetGlobalData

forceSetGlobalData方法拥有和setGlobalData一样的参数和行为，唯一不同的是forceSetGlobalData会强制发送数据，无论数据是否变化。

// 主应用中--强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
microApp.forceSetGlobalData({name: 'jack'}, () => {console.log('数据已经发送完成')
})

// 子应用中--强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceSetGlobalData({name: 'jack'}, () => {console.log('数据已经发送完成')
})

接收全局数据

主应用接收全局数据

import microApp from '@micro-zoe/micro-app'// 直接获取数据
const globalData = microApp.getGlobalData() // 返回全局数据function dataListener (data) {console.log('全局数据', data)
}/*** 绑定监听函数* dataListener: 绑定函数* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false*/
microApp.addGlobalDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)// 解绑监听函数
microApp.removeGlobalDataListener(dataListener: (data: Object) => any)// 清空主应用绑定的所有全局数据监听函数
microApp.clearGlobalDataListener()

子应用接收全局数据

// 直接获取数据
const globalData = window.microApp.getGlobalData() // 返回全局数据function dataListener (data) {console.log('全局数据', data)
}/*** 绑定监听函数* dataListener: 绑定函数* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false*/
window.microApp.addGlobalDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)// 解绑监听函数
window.microApp.removeGlobalDataListener(dataListener: (data: Object) => any)// 清空当前子应用绑定的所有全局数据监听函数
window.microApp.clearGlobalDataListener()

清空全局数据

主应用中清空全局数据

import microApp from '@micro-zoe/micro-app'// 清空全局数据
microApp.clearGlobalData()

子应用中清空全局数据

// 清空全局数据
window.microApp.clearGlobalData()

关闭沙箱后的通信方式

通过手动注册通信对象实现

  • 主应用中（为子应用初始化通信对象）
import { EventCenterForMicroApp } from '@micro-zoe/micro-app'// 注意：每个子应用根据appName单独分配一个通信对象
window.eventCenterForAppxx = new EventCenterForMicroApp(appName)

主应用通信方式没有任何变化

  • 子应用中
// 直接获取数据
const data = window.eventCenterForAppxx.getData() // 返回data数据function dataListener (data) {console.log('来自主应用的数据', data)
}/*** 绑定监听函数* dataListener: 绑定函数* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false*/
window.eventCenterForAppxx.addDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)// 解绑监听函数
window.eventCenterForAppxx.removeDataListener(dataListener: (data: Object) => any)// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.eventCenterForAppxx.clearDataListener()// 子应用向主应用发送数据，只接受对象作为参数
window.eventCenterForAppxx.dispatch({type: '子应用发送的数据'})

http://www.ppmy.cn/devtools/149760.html

相关文章

力扣经典二分题：4. 寻找两个正序数组的中位数

力扣经典二分题：4. 寻找两个正序数组的中位数

题目链接&#xff1a;4. 寻找两个正序数组的中位数 - 力扣&#xff08;LeetCode&#xff09; 一、题目分析 这道题目是让我们在 两个正序的数组中寻找中位数已知两个数组的大小分别是&#xff1a;int m nums1.size(),n nums2.size();中位数性质1&#xff1a;中位数左侧元素 …
阅读更多...
uniapp uni-popup使用scroll-view滚动时，底部按钮设置position:fixed失效，部分ios设置有问题

uniapp uni-popup使用scroll-view滚动时，底部按钮设置position:fixed失效，部分ios设置有问题

uniapp uni-popup使用scroll-view滚动时&#xff0c;底部按钮设置position:fixed失效&#xff0c;部分ios设置有问题 尝试过多种办法&#xff0c;最后发现部分机型position:fixed失效&#xff0c;position: sticky可以用&#xff0c;但是只设置sticky的话&#xff0c;部分机型…
阅读更多...
景芯SOC设计实战

景芯SOC设计实战

终身辅导、一对一辅导&#xff0c;手把手教您完成SoC全流程设计&#xff0c;从入门到进阶&#xff0c;带您掌握SoC芯片架构、算法、设计、验证、DFT、后端及低功耗全流程&#xff01;直播视频不定期升级&#xff01;让您快速超越同龄人&#xff01; 景芯团队主打文档服务器实战…
阅读更多...
58.在 Vue 3 中使用 OpenLayers 绘制点、线、圆、多边形

58.在 Vue 3 中使用 OpenLayers 绘制点、线、圆、多边形

前言 在现代 Web 开发中&#xff0c;地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个强大的开源地图库&#xff0c;支持多种地图源和地图操作。结合 Vue 3 的响应式特性&#xff0c;我们可以轻松实现地图的交互功能。本文将详细介绍如何在 Vue 3 中使用 OpenLayer…
阅读更多...
010：传统计算机视觉之大津算法初探

010：传统计算机视觉之大津算法初探

本文为合集收录&#xff0c;欢迎查看合集/专栏链接进行全部合集的系统学习。 合集完整版请参考这里。 上一节学习了利用 Canny 算法来完成一个图片的边缘检测&#xff0c;从而可以区分出图像的边缘。 本节再了解一个计算机视觉中更常见的应用&#xff0c;那就是把图片的前景和…
阅读更多...
npm-npm install时rollbackFailedOptional: verb npm-session ce210dc17dd264aa报错

npm-npm install时rollbackFailedOptional: verb npm-session ce210dc17dd264aa报错

1.前言 npm install的时候卡着不动&#xff0c;安装失败。 2.解决 2.1清除代理 npm config rm proxy npm config rm https-proxy #权限问题记得加sudo2.2修改镜像资源为淘宝镜像资源 npm config set registry http://registry.npm.taobao.org2.3查看镜像资源是否切换成功 …
阅读更多...
双模充电桩发展前景：解锁新能源汽车未来的金钥匙，市场潜力无限

双模充电桩发展前景：解锁新能源汽车未来的金钥匙，市场潜力无限

随着全球能源转型的浪潮席卷而来&#xff0c;新能源汽车行业正以前所未有的速度蓬勃发展&#xff0c;而作为其坚实后盾的充电基础设施&#xff0c;特别是双模充电桩&#xff0c;正逐渐成为推动这一变革的关键力量。本文将从多维度深入剖析双模充电桩的市场现状、显著优势、驱动…
阅读更多...
机器学习实战——决策树：从原理到应用的深度解析

机器学习实战——决策树：从原理到应用的深度解析

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​ ​​​ ​​ 决策树&#xff08;Decision Tree&#xff09;是一种简单而直观的分类与回归模型&#xff0c;在机器学习中广泛应用。它的…
阅读更多...
最新文章

Copyright @ 2022~2023