跳至主要內容
微前端qiankun Vue应用间通信的思考

注意：文中的父应用和主应用只是名称不同，但都指主应用基座。

之所以会有这个思考，是因为看了一篇文章 基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 ，其中有介绍使用 Shared 通信，精辟之处在于

// micro-app-vue/src/main.js
//...

/**
 * 渲染函数
 * 主应用生命周期钩子中运行/子应用单独启动时运行
 */
function render(props = {}) {
  // 当传入的 shared 为空时，使用子应用自身的 shared
  // 当传入的 shared 不为空时，主应用传入的 shared 将会重载子应用的 shared
  const { shared = SharedModule.getShared() } = props;
  SharedModule.overloadShared(shared);

  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",
    mode: "history",
    routes,
  });

  // 挂载应用
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount("#app");
}
fxss原创大约 14 分钟Vueqiankun