在开发中 有时会在打包或者各种可能的情况下 报错或警告提示 模块化打包的问题,
我们需要动态引入组件并渲染组件时,可以使用import引入 如下举例
import { ref, markRaw } from 'vue'
const childrenComponent = ref();
onMounted(() => {//举例引入一个组件childrenComponent.vueimport('**/..**../childrenComponent.vue').then((module) => {childrenComponent.value = markRaw(module.default);// 确保该赋值操作不会反复触发重新渲染});
});
可以使用component标签和:is 属性来动态创建和使用组件。
<component :is="childrenComponent" v-if=" childrenComponent"/>