使用过微前端，但是你可能没有使用过微组件

站长

2023年07月24日 12:57 · 阅读数 43

背景

用过微前端的人，可能会遇到这样一个需求，在一个模块开发好一个功能，突然因为某个需求，需要在另外一个模块使用这个功能，但是开发这个功能的人没有把这个功能封装成组件，或者因为业务逻辑很复杂，里面调用了一些接口什么的，反正就是因为各种原因没办法做成公共组件让各个模块去使用。我以前就遇到过这样的一个问题，开始在工作流模块开发了一个工作流流程编辑器功能，后面加了一个需求，需要在业务模块使用工作流流程编辑器预览工作流流程，因为这个组件里面调用了很多接口，和业务逻辑耦合度很高，不太好做成公共组件，于是我想到了一个方案，跨模块使用组件，即使不做成公共组件，也能丝滑的使用别的模块的功能。（我们公司用的是qiankun框架做的微前端）

实现思路

umi qiankun插件中导出了MicroApp组件，可以在任意代码中使用子模块，但是大多数都是通过路由去加载某个子应用的功能。我的想法是使用这个组件，然后改造一下，不通过路由的方式去加载子应用的某个功能，而是通过自定义的参数去加载子应用暴露出来的组件。

具体实现

下面给大家演示一个完整流程

初始化一个微前端项目

我在前面文章已经写过怎么初始化一个简单微前端项目，这里就详细写了。

手把手带你在微前端(qiankun)中实现多页签功能(路由keepalive)

项目初始化完成后，会有一个基座项目也叫主应用main，和两个子应用app1、app2。使用过微前端，但是你可能没有使用过微组件对应主项目的/src/pages/index.tsx文件对应app1 src/pages/index.tsx文件对应app2 src/pages/index.tsx文件

下面我们来实现一个简单需求，在main项目中使用app2的某个组件

改造main项目中`src/pages/index.tsx`文件

使用过微前端，但是你可能没有使用过微组件

上面代码中使用了MicroApp组件，这个组件是umi qiankun插件中导出来的，name参数表示子应用名称，type和componentName是我传给子应用的字段，type=component表示要加载子应用的组件，componentName表示要加载组件的名称。

改造app2应用中`src/layouts/index.tsx`文件

使用过微前端，但是你可能没有使用过微组件

效果

使用过微前端，但是你可能没有使用过微组件这里我们自定义的内容渲染出来了

在app1项目中使用app2的组件

需要先把app1设置为基座项目

修改app1 qiankun配置，把app2注册一下

qiankun: {
    slave: {},
    master: {
      apps: [
        {
          name: 'app2',
          entry: '//localhost:8002',
        },
      ],
    }
  },