vue如何实现动态组件

Vue 动态组件的实现方法

Vue 中可以通过 <component> 元素结合 is 属性实现动态组件切换，以下是具体实现方式：

使用 is 属性绑定组件

通过 v-bind:is 或 :is 动态指定组件名称或组件对象：

<component :is="currentComponent"></component>

在脚本中定义当前组件变量：

data() {
  return {
    currentComponent: 'ComponentA'
  }
},
components: {
  ComponentA,
  ComponentB
}

动态切换组件

通过方法或计算属性改变 currentComponent 的值：

methods: {
  switchComponent(componentName) {
    this.currentComponent = componentName;
  }
}

保持组件状态

使用 <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')
}

动态组件注册

运行时动态注册组件：

this.$options.components['DynamicComponent'] = import('./DynamicComponent.vue');
this.currentComponent = 'DynamicComponent';