vue3 动态异步引入组件

<template>
	<component :is="componentOptions[componentActive]" />
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
	setup() {
		const componentActive = ref('component1')

		const componentOptions = {
			component1:defineAsyncComponent(() => import('./component1.vue')),
			component2:defineAsyncComponent(() => import('./component2.vue')),
			component3:defineAsyncComponent(() => import('./component3.vue'))
		}

		return {componentActive, componentOptions}
	}
}
</script>