【微前端架构】MicroApp的实践-组件通信篇

大前端腾宇

共 2652字,需浏览 6分钟

 ·

2022-03-31 13:42

9837338914b7156ee96775e5748a38f4.webp

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

一、父工程向子工程下发信息(类似于父传子)

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

1、下发<template>    <h1>Vue 子应用h1>      <micro-app name='app1' url='http://localhost:8099/#/index' baseroute='/vue' :data="data">micro-app>template>
<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()

11320001c41d2222a54e0ae3b1c4aefb.webp

需要注意的是,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