vue2项目升级到vue3后,子应用使用主应用通过qiankun传递的组件在页面无法正确渲染
项目从vue2升级到vue3,主应用组件通过qiankun的props传递给子应用,子应用使用时无法正确渲染;
子应用和主应用ui框架都使用的同一版本ant design vue;
自己研究了很久没有解决,恳求大佬给个解决思路!
我弄了个demo,复现类似问题
//主应用
<template>
<div class="hello">
<h1>欢迎来到主应用</h1>
<h1>------------------------</h1>
主应用组件:
<TestModule />
<h1>------------------------</h1>
<a-button @click="loadSubApp">加载子应用</a-button>
<h1>------------------------</h1>
<div id="subapp-container"></div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import TestModule from './TestModule.vue'
import { loadMicroApp } from 'qiankun';
const subApp = ref(null);
const loadSubApp = () => {
subApp.value = loadMicroApp({
name: 'sub-app',
entry: '//localhost:8849',
container: '#subapp-container',
props: {
components: {
TestModule: TestModule
}
},
sandbox: {
experimentalStyleIsolation: false // 关闭严格样式隔离
}
});
};
</script>
```javascript
//子应用main.js
//子应用main.js
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
let app = null;
function render(props = {}) {
app = createApp(App);
app.use(Antd);
const { container } = props;
if (window.__POWERED_BY_QIANKUN__) {
Object.entries(props.components).forEach(([componentName, component]) => {
app.component(componentName, component);
console.log(`已注册组件: ${componentName}`);
});
}
app.mount(container ? container.querySelector("#app") : "#app");
}
export async function bootstrap() {
console.log("vue app bootstraped");
}
// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function mount(props) {
render(props);
}
export async function unmount() {
app.unmount();
app = null;
}
//子应用使用
<template>
<div class="hello">
<h1>子应用欢迎您!!</h1>
<h1>--------------------</h1>
<a-button>子应用的按钮</a-button>
<h1>--------------------</h1>
<TestModule></TestModule>
</div>
</template>
<script setup>
</script>