javascript 主机应用程序中的 React、Vue 微前端通信答案

【问题标题】：React, Vue microfrontend communication inside a javascript host applicationjavascript 主机应用程序中的 React、Vue 微前端通信
【发布时间】：2022-06-28 01:07:33
【问题描述】：

我有使用 REACT 和 VUE 的微前端远程组件。我想在使用 vanilla JS 的主机应用程序（.net）中使用这些组件。我目前正在使用模块联合将远程组件加载到主机应用程序中。如何在这些组件之间共享状态。换句话说，一个组件如何与另一个组件通信？

【问题讨论】：

标签： javascript reactjs asp.net micro-frontend webpack-module-federation

【解决方案1】：

基本方式是EventListener Bus。示例：您的 Vue 组件正在触发事件，而您的 React 组件正在监听此事件。当事件被触发时，react 将开始自己的动作。

您可以为此使用single-spa 库。它支持 vanillaJS

【讨论】：

非常感谢您的回答。我去看看。

【解决方案2】：

似乎我发现的最好方法是使用broadcastChannel API。这是一个react hooks implementation of it，它在 WebPack 模块联合 MFE 设置中运行良好。

【讨论】：