qiankun 通用模块foundatiion 在 项目project 模块单独引用组件

相对麻烦一点

foundation  main.js

export async function mount(props) {
    window.commonComponents = props.commonComponents
    window.loadMicroApp = props.loadMicroApp;
       // ...
    render(props)
}

project main.js

// 引用组件
import MicroResultEntryfrom './views/components/MicroResultEntry.vue'
export async function mount(props) {
    window.commonComponents = props.commonComponents
    window.loadMicroApp = props.loadMicroApp;
    if(props.isLoad){
        props.commonComponents.MicroResultEntry = MicroResultEntry
    }
    // ...
}

在项目中调用注册组件:

 // 作为公共方法
 // 手动注册子应用 
 async doLoadMicroApp(microName, entry) {
            const app = window.loadMicroApp({
                name: `${microName}${new Date().getTime()}`,
                entry: entry,
                container: '#appContainer2',
                props: { commonComponents: window.commonComponents, isLoad: true }
            })
            await app.mountPromise;
        },

 最后在对应组件中调用

 async created() {
       await this.doLoadMicroApp('microProject', this.microProjectEntry)
       Vue.component('MicroResultEntry', window.commonComponents.MicroResultEntry)
    },