微前端ice-stark主应用与子应用间的通信

最新推荐文章于 2025-12-03 12:06:34 发布

原创最新推荐文章于 2025-12-03 12:06:34 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

Vite2.0 同时被 3 个专栏收录

7 篇文章

订阅专栏

ICESTARK

2 篇文章

订阅专栏

微前端

2 篇文章

订阅专栏

本文详细介绍了微前端场景下主应用与子应用之间的通信方式，包括使用store进行数据共享，事件总线实现子应用向父应用的通信，以及通过props在icestark2.0中传递数据。示例代码展示了如何设置和获取用户信息，以及子应用触发事件和父应用接收数据的过程。

微前端中都需要哪些通信

主应用与子应用通信
子应用之间的通信

主应用与子应用通信

安装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);
}