vue3动态加载组件

如何在Vue3中动态加载组件

需求根据下拉框的值，加载不同的组件
新建文件aaa.vue，bbb.vue

<template><div class="container">我是bbbb组件</div>
</template><script lang="ts" setup name="taskPush">
</script>
<style scoped lang="less">
</style>

aaa组件

<template><div class="container">我是aaa组件</div>
</template><script lang="ts" setup name="taskPush">
</script>
<style scoped lang="less">
</style>

新建.ts文件

import { shallowRef } from 'vue';
export default function () {const asyncComponent: any = shallowRef({}); //渲染的表单组件（异步加载）/*** 获取calssify下的某一个组件* @param moduleName 组件名称*/const getFormComponents = (moduleName: string) => {import(`./${moduleName}.vue`).then((module: any) => {asyncComponent.value = module.default;});};return {getFormComponents,asyncComponent};
}

在父组件中使用

<template><div class="container"><el-selectv-model="value"placeholder="Select"size="large"style="width: 240px"@change='changeCom'><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><component:is="asyncComponent"ref="componentRef"></component></div>
</template><script lang="ts" setup >
import { ref } from 'vue'
import getModuleList from "./getModuleList";
const { getFormComponents, asyncComponent } = getModuleList();
const value = ref('')const options = [{value: 'aaa',label: '组件',},{value: 'bbb',label: '组件bbb',},
]
const changeCom = (e:any)=>{}</script>
<style scoped lang="less">
</style>