vue中实现动态组件
Vue 动态组件的实现方法
在 Vue 中实现动态组件可以通过内置的 <component> 元素结合 is 属性完成。以下是几种常见实现方式：
基础用法
使用 is 属性绑定组件名或组件选项对象：
<component :is="currentComponent"></component>data() {
return {
currentComponent: 'ComponentA'
}
}动态切换组件
通过改变绑定的组件名实现切换：
components: {
ComponentA,
ComponentB
},
methods: {
toggleComponent() {
this.currentComponent =
this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}保持组件状态
使用 <keep-alive> 包裹动态组件可保留状态：
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>传递 props 和事件
动态组件支持常规的 props 和事件绑定：
<component
:is="currentComponent"
:propName="value"
@customEvent="handler"
></component>异步组件
结合异步组件实现按需加载：
components: {
AsyncComponent: () => import('./AsyncComponent.vue')
}组件对象形式
可以直接绑定组件选项对象：
data() {
return {
currentComponent: {
template: '<div>动态模板</div>'
}
}
}注意事项
- 动态组件名需在
components选项中注册 - 使用
<keep-alive>时会触发activated和deactivated生命周期 - 组件切换时默认会销毁旧组件实例，除非使用
<keep-alive> - 动态组件不支持 Vue 2.x 的
inline-template特性
