在 vue 中，动态组件通过 <component> 标签配合 is 属性实现；1. 使用方式为 <component :is=”currentcomponent”></component>，其中 currentcomponent 可以是字符串或组件对象；2. 字符串写法适用于全局注册的组件，对象写法则适合局部注册或异步导入；3. 注意事项包括必须先注册组件、避免拼写错误、处理异步加载及使用 keep-alive 缓存状态。
在 Vue 中，动态组件是通过
<component>
元素配合
is
属性实现的。简单来说，
<component :is="xxx">
能够根据
xxx
的值来决定渲染哪个组件，而不是写死一个具体的组件名。
这在需要根据不同条件展示不同组件时非常有用，比如切换 Tab 页面、根据用户权限加载不同内容等。
动态组件的基本用法
使用动态组件的核心在于
<component>
标签和
is
属性：
立即学习“前端免费学习笔记（深入）”；
<component :is="currentComponent"></component>
这里的
currentComponent
可以是一个组件名称的字符串，也可以是一个组件的引用（对象形式）。
举个例子，假设有两个组件：
HomeView.vue
和
AboutView.vue
，你可以这样在父组件中动态切换它们：
data() { return { currentComponent: 'HomeView' } }
然后在模板中：
<component :is="currentComponent" />
当你把
currentComponent
改成
'AboutView'
时，页面就会自动切换到对应的组件。
is 属性的多种写法
is
属性不仅可以传字符串组件名，还可以直接传递组件对象，这对于局部注册的组件特别有用。
1. 字符串写法（推荐用于全局注册组件）
如果你已经将组件全局注册了（通过
app.component()
），可以直接传组件名字符串：
components: { HomeView, AboutView }
<component :is="currentTabComponent" />
2. 组件对象写法（适合局部注册或动态导入）
你也可以直接绑定一个组件对象，比如：
import HomeView from './views/HomeView.vue' export default { components: { HomeView }, data() { return { currentComponent: HomeView } } }
或者从异步加载的组件中使用：
const AsyncComponent = () => import('./views/AsyncView.vue')
常见问题与注意事项
- 组件必须先注册：无论是全局还是局部注册，要确保组件已经在当前上下文中注册过。
- 避免拼写错误：使用字符串方式时，组件名要和注册的一致，包括大小写格式（例如
MyComponent
和
my-component
是不同的）。
- 动态导入组件时需注意异步处理：如果使用异步组件（如懒加载），可能需要配合
Suspense
使用。
- 可以结合 keep-alive 缓存状态：在频繁切换的场景下，加上
<keep-alive>
可以保留组件状态，避免重复创建销毁。
示例：
<keep-alive> <component :is="currentComponent" /> </keep-alive>
基本上就这些。掌握好
<component>
和
is
的用法，就能灵活应对很多组件切换的场景了。