vue动态组件实现

动态组件的基本用法

在Vue中，动态组件通过<component>标签和is属性实现。is属性可以绑定组件名称或组件选项对象，实现动态切换。

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

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

组件注册方式

全局注册的组件可以直接通过字符串名称使用。局部注册的组件需要在当前组件中声明。

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

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

动态切换组件

可以通过方法或计算属性动态改变currentComponent的值来切换组件。

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

保持组件状态

使用<keep-alive>包裹动态组件可以保持组件状态，避免重复渲染。

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

传递props和事件

动态组件可以像普通组件一样接收props和触发事件。

<template>
  <component 
    :is="currentComponent" 
    :propName="value"
    @custom-event="handleEvent"
  ></component>
</template>

动态导入异步组件

结合Vue的异步组件特性，可以实现按需加载。

const AsyncComponent = () => ({
  component: import('./AsyncComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

export default {
  components: {
    AsyncComponent
  }
}

动态组件的高级用法

在复杂场景中，可以通过工厂函数动态生成组件选项。

function createDynamicComponent(options) {
  return {
    ...options,
    template: `<div>${options.content}</div>`
  }
}