vue3在＜script setup＞中如何使用动态组件

vue3在

针对这个问题，其实 vue官方已经给出了说明。

由于组件被引用为变量而不是作为字符串键来注册的，在

什么意思呢？看我的真实示例：

<script setup>
import { reactive } from 'vue'
import Daily from './index/daily.vue'
import Week from './index/week.vue'
import Month from './index/month.vue'

const pageParams = reactive({
	type: 1
})
//注意 这里写的是变量 Daily 而不是字符串 'Daily'
const typeComponentMap = {
	1: Daily,
	2: Week,
	3: Month,
}
</script>

<template>
	<keep-alive>
		<component :is="typeComponentMap[pageParams.type]" />
	</keep-alive>
</template>

官方文档地址：https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6