Vue 3 script setup 中动态组件需传入组件对象而非字符串，用 ref 或 shallowRef 存储并绑定 :is；多组件推荐用映射对象管理，配合 transition 实现平滑切换。

在 Vue 3 的 script setup 中处理动态组件，关键在于：直接传入组件对象（而非字符串名称），并用响应式变量控制切换。这和 Options API 或全局注册组件的写法有本质区别——局部导入的组件不能靠字符串名识别，必须是真实引用。

动态组件的 is 值必须是组件对象

使用 <component :is="xxx"> 时，xxx 的值需为已导入的组件本身（如 Home、About），不是字符串 "Home"。否则会渲染空白，控制台无报错但组件不出现。

• ✅ 正确：用 ref() 或 shallowRef() 存储组件对象
• ❌ 错误：赋值为字符串（除非该组件已全局注册且用的是注册名）

基础切换写法（2个组件）

导入组件 → 定义响应式变量 → 点击切换赋值 → 模板中绑定 :is：

<script setup lang="ts">
import { ref } from 'vue'
import Home from './Home.vue'
import About from './About.vue'

const current = ref(Home) // 初始显示 Home

const switchToHome = () => (current.value = Home)
const switchToAbout = () => (current.value = About)
</script>

<template>
<button @click="switchToHome">首页</button>
<button @click="switchToAbout">关于</button>
<component :is="current" />
</template>

多个组件切换推荐用对象映射

当组件数量较多（如 Tab 标签页），避免写一堆 if-else 或重复赋值，可用配置对象统一管理：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

• 定义组件映射表：const components = { home: Home, about: About, contact: Contact }
• 用字符串 key 控制状态：const activeKey = ref('home')
• 模板中通过 components[activeKey.value] 获取组件对象

这样既保持逻辑清晰，又方便后续扩展或从后端配置读取 tab 列表。

配合 transition 实现平滑切换

动态组件默认销毁重建，加 <transition> 可添加入场/离场动画：

<transition name="slide-fade" mode="out-in">
<component :is="current" :key="current" />
</transition>

注意加 :key（值可为组件对象或唯一标识），确保 Vue 能正确触发过渡；mode="out-in" 避免新旧组件同时存在导致布局抖动。