文档 属性·动作·事件
使用场景
微前端容器与事件总线（事件通道组件），实现了将一个大型的前端应用拆分成多个子应用的功能。微前端导出部署时需要选择导出前后台代码，不支持导出HTML或导出前端代码使用。
每个子应用，可单独开发与发布，可通过事件总线相互通信。如下图所示：
在上图中，主应用是一个普通的应用，内部嵌入了两个微前端容器，其中分别加载两个子应用，而子应用1进一步通过微前端容器嵌入了一个孙应用。祖孙三代所有的应用，都可以通过事件总线进行通信。
一个常见的微前端容器的使用结构，是外层主应用为一个导航应用，内部的一个或多个导航页，每一个都对应一个子应用，类似iVX的工作台：
#### 微前端容器 VS 小模块
我们可以将子应用与孙应用，理解为主应用中的组件（小模块），但相比小模块，微前端容器有以下优势：
- 子应用可独立、按需加载，因此主应用的代码包的大小可尽量缩减，最大程度上加快主应用的加载速度；
- 父子应用代码隔离，子应用可独立开发、维护，只需要约定和主应用或其他子应用之间的通信规则即可。由于可将一个大项目拆分成N个小项目，每个项目的维护难度都能显著降低；
- 子应用可独立发布/部署，降低犯错风险，一个子应用出现bug不会影响到项目的其他部分。
微前端容器 VS iframe网页组件
微前端容器的使用方法和iframe网页组件类似，也是通过指定一个URL地址来指定一个子应用地址。但微前端容器并不是简单的iframe，其本质上是通过shadow dom将子应用在内存中加载，并渲染至主应用上。因此，与iframe相比，微前端容器有以下优势：
- 性能更优越，iframe是一套完整的网页运行环境，相比微前端容器这种虚拟的运行环境，更消耗系统资源；
- 子应用可保活，即子应用在切换走再切换回来时，无需重新加载，且其中的组件属性可维持切换之前的状态。比如，用户在一个子应用的输入框中，输入了文本，然后切换至另一个子应用，再切回来时，用户输入的文本依然存在。而iframe在每次切换之后，会重新加载刷新；
- 弹窗可以覆盖整个应用，在微前端容器中，如果在子应用中使用全屏的弹窗（比如横幅组件），可覆盖整个应用，而不是像iframe一样只能局限在iframe范围内；
微前端容器使用方法
微前端容器，和iframe网页组件使用方法类似，添加至应用之后，需要指定一个目标子应用。指定方法有两种：
1、如果当前应用属于一个组应用，则可以首先在组应用管理界面中，将某个需要被嵌入的应用设置为微前端子应用：
设为子应用之后，可以在微前端容器的下拉菜单中，选择一个子应用（不可以选自己）：
选择之后，就可将目标应用嵌入至当前应用了。
组应用如果另存，或设为模板，这种嵌入关系可以保留。因此，建议将需要相互嵌套的应用都装在一个组里，这样不需要手动维护嵌入的地址。
2、如果当前应用不属于组应用，或需要嵌入外部的地址，则可以直接嵌入一个URL地址，URL地址可以用相对路径，或绝对路径。注意，如果使用外部地址，需要保证该地址允许跨域访问，否则无法嵌入成功。
指定子应用之后，微前端容器还需要额外设置一个标识ID，这个ID用于系统区分不同的子应用，需要保证每个子应用的名称不同。当在对象树中添加一个微前端容器组件时，系统会自动创建一个随机的标识ID。但注意，当我们将微前端容器放在for容器下时，由于可能会出现多个微前端容器，因此需要将标识ID绑定一个独立唯一的字段，否则可能导致切换异常。
特别提醒，如果子应用在移动端，不要打开子应用的微信授权，微前端容器内外cookie是互通的，如需授权请在外层应用中去授权。
微前端容器的通信
主应用向子应用发送消息
微前端实际上可以视为主应用的子应用，这里我们介绍主子应用之间如何传递数据。
当主应用要传递数据给子应用时，目标对象选择接收数据的微前端，使用设置属性动作，在子应用属性中写入需要传递的数据，通常来说是一个JSON。
在子应用中，使用应用系统中的“子应用参数改变”事件，这个事件在微前端应用初始化和子应用属性参数变化时都会触发，关联参数中的“属性”就是我们设置属性中子应用属性的值。
这里需要和大家额外说明一下，这个“子应用参数改变”的事件会先于页面初始化，所以如果我们想通过获取属性的参数来控制进入到子应用不同的页面，我们可以在这个事件下使用变量存储一下属性参数，在子应用的加载页再通过判断暂存的变量去跳转到不同的页面之下。
子应用向主应用发送消息
当子应用要传递数据给主应用时，需要使用事件通道组件，目标对象选择事件通道，使用发送消息动作，在消息中写入需要传递的数据，通常来说是一个JSON。
在主应用中，使用事件通道的“收到消息”事件，由于主应用一定已经完成的加载，所以可以收到消息，关联参数中的消息内容就是通过事件通道发送的消息内容。
这里是一个实例的大型应用拆分的demo：
点击下载
在这个案例中，有一个单独维护的后台端，一个主应用和俩个子应用，涉及了主->子、子->主、子->主->子数据传输的一般做法。
若有收获，就点个赞吧
0 人点赞
