标签仅动态挂载已注册组件，须先全局或局部注册目标组件，再通过:is绑定组件名字符串、导入的组件模块或defineAsyncComponent创建的异步组件；搭配可缓存状态，且组件需有明确name。
component 标签本身不负责注册组件，它只负责动态挂载已注册的组件。要让它正常工作，必须先确保目标组件已在当前作用域中完成注册（全局或局部），然后通过 :is 绑定一个能解析为组件定义的值。
明确组件注册方式
Vue 中组件必须注册后才能被 <component></component> 识别。分两种情况：
-
局部注册：在父组件的
components选项中声明，仅对该父组件及其子模板有效 -
全局注册：在应用实例上用
app.component()注册，整个应用都可用（适合通用组件，但影响 tree-shaking）
component 标签的正确绑定写法
<component></component> 的核心是 :is 属性，它的值必须是以下之一：
- 已注册的组件名称字符串（如
'MyForm'），前提是该名称与注册时一致 - 导入的组件模块本身（如
import MyForm from './MyForm.vue'，直接传MyForm） - 异步组件对象（通过
defineAsyncComponent创建）
错误示例：:is="'MyForm.vue'" 或 :is="MyForm.vue" —— 路径字符串或无效引用无法解析为组件定义。
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
常见搭配：keep-alive 缓存状态
频繁切换组件时，如果不加处理，每次都会销毁重建。加上 <keep-alive></keep-alive> 可缓存实例状态：
<keep-alive> <component :is="currentTab"></component> </keep-alive>
注意：<keep-alive></keep-alive> 要求组件有明确的 name（显式设置或通过文件名推导），否则可能无法正确缓存。
Vue 3 中的异步加载推荐写法
按需加载大组件时，结合 defineAsyncComponent 和 :is 更可靠：
import { defineAsyncComponent } from 'vue'
const AsyncChart = defineAsyncComponent(() => import('./charts/LineChart.vue'))
export default {
components: { AsyncChart },
data() {
return { currentComponent: AsyncChart }
}
}
模板中：<component :is="currentComponent"></component>。这样既支持懒加载，又保持了动态挂载能力。
