微前端中都需要哪些通信
- 主应用与子应用通信
- 子应用之间的通信
主应用与子应用通信
安装store
使用 @ice/stark-data 包,需要单独安装
pnpm install @ice/stark-data --save
使用store
主应用页面引入后进行传值
import { store } from '@ice/stark-data'
console.log(store)
const userInfo = { name: 'Sabo', age: 29 }
store.set('user', userInfo)
同理,子应用中获取user,监听主应用数据变化
import { store } from '@ice/stark-data'
const userInfo = store.get('user')
console.log('userInfo: ', userInfo)
子应用传值给父应用
子应用触发事件
<template>
<div>
<h1 @click="initHandler">home</h1>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { event } from "@ice/stark-data";
const initHandler = async () => {
event.emit("freshMessage", "vue lllllmessage");
};
</script>
<style scoped lang="less"></style>
父应用接收数据
import { event } from '@ice/stark-data'
event.on('freshMessage', (res: string) => {
console.log('App ', res)
})
props传值
在icestark2.0更新版本中,icestark 还支持通过 props 将主应用数据传递给微应用。
在主应用中通过 props 配置用户信息。
// src/App.jsx
import { AppRouter, AppRoute } from '@ice/stark';
const App = () => {
return (
<AppRouter>
<AppRoute
name="waiter"
activePath="/waiter"
title="商家平台",
props={{
userId: 'xxxxx'
}}
url={[
'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/js/app.js',
'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/css/app.css',
]}
/>
...
</AppRouter>
);
}
微应用可以通过生命周期函数获取到该数据:
export function mount({ container, customProps }) {
ReactDOM.render(<App { ...customProps } />, props.container);
}