qiankun 基座下发组件

父子项目间组件共享

因为主项目会先加载，然后在加载子项目，所以一般都是子项目复用主项目的组件

实现：

一、主应用（基座）入口 main.js 文件

// 组件文件路径

import Assembly from '@/components/common/assembly.vue'


window.components= {
  Assembly
}

二、基座使用到的组件安装npm包 (在基座安装就基座下发，或者直接在子项目安装)

yarn add lodash -S

// 或者
npm install lodash -S

三、 lodash 使用 （主要就是使用里面的 cloneDeep 方法）

import _ from 'lodash'

// cloneDeep 深拷贝

for (const componentsName in window.commonComponents) {
  Vue.component(componentsName, _.cloneDeep(window.commonComponents[componentsName]))
}

四、在子项目 main文件 注册 window挂载的内容，弄成全局组件

import _ from 'lodash'

// cloneDeep 深拷贝

for (const componentsName in window.commonComponents) {
  Vue.component(componentsName, _.cloneDeep(window.commonComponents[componentsName]))
}

注意事项：

1. 当子应用引入了组件，这个时候组件里面的 this指向是 子应用 也就是说如果组件里面有 “http请求”，“i18n翻译 ” 都需要在子应用安装好环境
2. 当使用 vue-i18n 翻译的时候，公共组件里面的子组件引入方式不能是动态引入

   不推荐引入方式
   
   const assembly = () => import('@components/assembly.vue')
   
   推荐使用
   
   import assembly from '@components/assembly.vue'
   
   
   

解决的bug 

  使用以上方法可以解决下面这些问题

1.  基座下发组件，先打开的子应用访问正常，后面打开的子应用不显示组件
2. 使用 vue-i18n 报Cannot read property '_t' of undefined