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 特性