【微<em><!--red_beg-->前端<!--red_end--></em>架构】MicroApp的实践-组件通信篇

如果微服务之间不能够通信，那么微服务还有什么意义呢？我们是用最简单的iframe岂不更好，因此通信也是非常重要的一环。

一、父工程向子工程下发信息（类似于父传子）

1、通过标签中的data直接传递即可

1、下发<script lang="ts" setup>import { ref } from "vue"const data = ref({msg: "我是下发的消息"})2、子工程接收① window.microApp.getData()② 监听获取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()

需要注意的是，data必须是一个Object

2、主动下发消息（操作）

1、父工程下发消息import microApp from "@micro-zoe/micro-app"// 发送数据给子应用 my-app，setData第二个参数只接受对象类型microApp.setData("my-app", {type: "新的数据"})2、子工程接收消息同上，两种方式① window.microApp.getData()② 监听

二、子工程向父工程上传发信息（类似于子传父）

1、类似于$emit,子工程向父工程发送消息// dispatch只接受对象作为参数window.microApp.dispatch({type: "子应用发送的数据"})2、父工程接收来自子工程的数据① 通过自定义的形式，类似于接受$emit的数据-datachange<script lang="ts" setup>import { ref } from "vue"let msg = ref("")const data = ref({msg: "我是下发的消息"})const getDataChange = (data: any) => {console.log("我是来自子应用的数据...", data)msg.value = data.detail.data.type}</script>② 直接获取，需要放入父工程的文件，否则会报错import microApp from "@micro-zoe/micro-app"const childData = microApp.getData(appName) // 返回子应用的data数据③ 监听函数

三、使用全局对象（setGlobalData）

1、发送消息

1、父工程import microApp from "@micro-zoe/micro-app"// setGlobalData只接受对象作为参数microApp.setGlobalData({type: "全局数据"})2、子工程// setGlobalData只接受对象作为参数window.microApp.setGlobalData({type: "全局数据"})

2、接收消息

1、父工程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()2、子工程// 直接获取数据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()

MicroApp 提供了一套开箱即用的微前端解构方案，还有很多资源共用等特性，需要逐步探索。

关键词： 触发一次 发送数据 自动补全