微前端 micro-app 传参、通信

 环境及配置，参考：https://www.cnblogs.com/1285026182YUAN/p/17828681.html

 1. 应用传参

主应用：

<template>
  <div class="container"><micro-app
      name="my-app-page1"
      url="http://localhost:5173/stand"
      :data="microAppData"
      disableSandbox
      inline
    ></micro-app>
  </div>
</template>

<script>
export default {
  data() {
    return {
      microAppData: { msg: '来自基座的数据' },
    };
  },
};

 子应用：

创建通信组件 src / utils / MicroTidings.ts 

import { createRouter, createWebHashHistory, RouterHistory, Router } from 'vue-router'


declare global {
  interface Window {
    eventCenterForAppNameVite: any
    __MICRO_APP_NAME__: string
    __MICRO_APP_ENVIRONMENT__: string
    __MICRO_APP_BASE_APPLICATION__: string
  }
}

// 与基座进行数据交互
export function handleMicroData (router: Router) {
    // eventCenterForAppNameVite 是基座添加到window的数据通信对象
    if (window.eventCenterForAppNameVite) {
      // 主动获取基座下发的数据
      console.log('child-vite getData:', window.eventCenterForAppNameVite.getData())
  
      // 监听基座下发的数据变化
      window.eventCenterForAppNameVite.addDataListener((data: Record<string, unknown>) => {
        console.log('child-vite addDataListener:', data)
  
        if (data.path && typeof data.path === 'string') {
          data.path = data.path.replace(/^#/, '')
          // 当基座下发path时进行跳转
          if (data.path && data.path !== router.currentRoute.value.path) {
            router.push(data.path as string)
          }
        }
      })
  
      // 向基座发送数据
      setTimeout(() => {
        window.eventCenterForAppNameVite.dispatch({ myname: 'child-vite' })
      }, 3000)
    }
  }
  

   

在main.ts中，调用通信方法

import { handleMicroData } from "./utils/MicroTidings";

const app = createApp(App);

app.use(router);
app.use(createPinia());
app.use(ElementPlus);
app.use(http);
app.mount("#my-vite-app");

handleMicroData(router);

end.