vue 动态组件实现
动态组件的基本概念
在 Vue 中，动态组件通过 <component> 标签结合 is 属性实现，允许根据条件或用户交互切换不同的组件。核心机制是利用 is 属性绑定组件名或组件选项对象。
实现动态组件的步骤
定义多个组件
创建需要动态切换的组件，例如 ComponentA 和 ComponentB：
const ComponentA = {
template: '<div>组件A的内容</div>'
};
const ComponentB = {
template: '<div>组件B的内容</div>'
};使用 <component> 标签
在父组件模板中，通过 is 属性动态指定当前渲染的组件：
<component :is="currentComponent"></component>绑定动态组件名
通过数据属性控制当前显示的组件，例如使用按钮切换：
data() {
return {
currentComponent: 'ComponentA'
};
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA'
? 'ComponentB'
: 'ComponentA';
}
}结合 keep-alive 缓存状态
动态组件切换时默认会销毁旧组件实例。使用 <keep-alive> 包裹可以保留组件状态：
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>动态组件的进阶用法
通过组件对象切换is 属性可以直接绑定组件选项对象，而非字符串名称：
data() {
return {
currentComponent: ComponentA // 直接引用组件对象
};
}动态加载异步组件
结合 defineAsyncComponent 实现按需加载：
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);注意事项
- 组件名需全局注册或在当前组件局部注册。
- 动态组件常用于标签页、向导流程等需要频繁切换的场景。
- 使用
keep-alive时可通过include/exclude控制缓存范围。
