vue 3 script setup 中动态组件需传入组件对象而非字符串，用 ref 或 shallowref 存储并绑定 :is；多组件推荐用映射对象管理，配合 transition 实现平滑切换。
在 Vue 3 的 script setup 中处理动态组件，关键在于：直接传入组件对象（而非字符串名称），并用响应式变量控制切换。这和 Options API 或全局注册组件的写法有本质区别——局部导入的组件不能靠字符串名识别，必须是真实引用。
动态组件的 is 值必须是组件对象
使用 <component :is="xxx"></component> 时，xxx 的值需为已导入的组件本身（如 Home、About），不是字符串 "Home"。否则会渲染空白，控制台无报错但组件不出现。
- ✅ 正确：用
ref()或shallowRef()存储组件对象 - ❌ 错误：赋值为字符串（除非该组件已全局注册且用的是注册名）
基础切换写法（2个组件）
导入组件 → 定义响应式变量 → 点击切换赋值 → 模板中绑定 :is：
多个组件切换推荐用对象映射
当组件数量较多（如 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> 可添加入场/离场动画：
注意加 :key（值可为组件对象或唯一标识），确保 Vue 能正确触发过渡；mode="out-in" 避免新旧组件同时存在导致布局抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
