Vue动态切换组件需用标签配合:is属性，支持字符串名或组件对象绑定，须确保响应式并注册组件，配合可缓存状态。

Vue 模板中动态切换组件名称并渲染，核心是用 `` 标签配合 `:is` 属性——它不写死组件，而是运行时按需加载指定组件，比堆砌一堆 `v-if` 更简洁、更灵活。

绑定方式：字符串名或组件对象都支持

`:is` 接收两种值：

• 已注册的组件名称字符串（如 `'Home'`、`'UserList'`），注意推荐用 kebab-case（如 `'user-profile'`），避免大小写歧义
• 直接传入组件对象（比如 `defineAsyncComponent(() => import('./LazyModal.vue'))` 返回的异步组件引用）

只要值变化，Vue 就自动卸载旧组件、挂载新组件。前提是该组件已在父组件的 `components` 选项中声明注册（或全局注册）。

必须保证响应式，否则切换无效

`:is` 绑定的变量必须是响应式数据，否则 Vue 无法监听变化：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 在 `<script setup>` &#20013;&#29992; `ref()` &#25110; `computed()` &#36820;&#22238;&#20540;&#65288;&#22914; `const current = ref('Home')`&#65289;</script>
• 在 Options API 中，必须定义在 `data()` 返回对象里（不能是普通属性）
• 避免直接赋值非响应式常量，例如 `:is="'Home'"` 是静态写法，不会触发切换

保持状态：加 `` 缓存实例

默认每次切换都会销毁旧组件，导致表单输入清空、滚动位置丢失。解决方法是包裹 ``：

• 加上后，组件进入“缓存”而非“销毁”，再次激活时复用原有实例
• 可配合 `include` / `exclude` 属性精准控制哪些组件需要缓存（如 `include="Home,Settings"`）
• 组件内可用 `onActivated` 和 `onDeactivated`（或 `activated`/`deactivated` 选项）监听缓存生命周期

常见坑点与建议

实际开发中容易忽略的关键细节：

• 组件名字符串必须和注册时的 key 完全一致（区分大小写，且不能带 `.vue` 后缀）
• 如果用 `defineAsyncComponent`，确保加载成功后再赋值给 `:is`，避免白屏；可配合 `v-if` 做 loading 判断
• 不要在 `:is` 中直接写表达式如 `:is="type === 'form' ? Form : Table"`，应先在计算属性或方法中处理好再绑定
• 动态组件不继承父作用域的 `props`，需显式透传（如 ``）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！