vue + qiankun全局变量配置（组件，指令，函数）

微前端（qiankun）

全局配置通用组件，自定义指令，通用方法等

// 在 @/components/common/... 路径下自定义通用组件

// 配置通用组件，传递给子应用 - initSubApp.js
//定义 components 
const components = []
// 获取公共组件配置
const myComponents = require.context('@/components/common', true, /.vue$/)
myComponents.keys().map(key => {
  const compName = key.split('/')[1]
  components.push({
    name: compName,
    files: require(`@/components/common/${compName}`).default
  })
})

// 配置通用方法，传递给子应用
import * as parentUtils from '@/utils/util'

// 配置通用自定义指令，传递给子应用
const directives = []
const files = require.context('@/directive/common', true, /.js$/)
files.keys().map((key) => {
  const directiveName = key.split('/')[1]
  directives.push({
    name: directiveName,
    files: require(`@/directive/common/${directiveName}`).default
  })
})

// 定义数据
const msg = {
    data: store && store.getters, // 从主应用仓库读出的数据
    components: {}, // 从主应用读出的组件库
    utils: parentUtils, // 从主应用读出的工具类库
    emitFnc: {}, // 从主应用下发emit函数来收集子应用反馈
    state: {
      message: '主应用',
      time: +new Date(),
      directives,
      components,
      parentUtils
    }
  }

// 在主应用注册官方通信方案
const actions = initGlobalState(msg.state)
// 注册消息监听函数
actions.onGlobalStateChange((state, prev) => console.log(`主应用应用监听到来自${state.from}发来消息：`, state, prev))
actions.setGlobalState(msg.state)

在子组件中使用 主应用 定义的组件，指令，函数

export async function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // 注册全局指令
    state.directives && state.directives.length && state.directives.forEach(it => {
      Vue.directive(it.name, it.files)
    })
    // 注册全局组件
    state.components && state.components.forEach(it => {
      Vue.component(it.name, it.files)
    })
    
    // 注册全局函数
    Object.keys(state.parentUtils).length && Object.keys(state.parentUtils).forEach(item => {
      Vue.prototype[item] = state.parentUtils[item]
    })
  }, true)
  instance = new Vue({
    render: h => h(App)
  }).$mount('#sub')
}