vue 实现动态组件

Vue 动态组件的实现方法

Vue 中实现动态组件主要通过 component 标签和 is 属性完成，以下为具体实现方式：

使用 component 标签

通过 :is 绑定组件名称或组件对象，实现动态切换：

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

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

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

动态组件切换

通过方法或计算属性控制当前显示的组件：

<template>
  <component :is="currentComponent"></component>
  <button @click="toggleComponent">切换组件</button>
</template>

<script>
export default {
  data() {
    return {
      showA: true
    }
  },
  computed: {
    currentComponent() {
      return this.showA ? 'ComponentA' : 'ComponentB'
    }
  },
  methods: {
    toggleComponent() {
      this.showA = !this.showA
    }
  }
}
</script>

保持组件状态

使用 keep-alive 包裹动态组件可保留组件状态避免重复渲染：

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

异步组件

结合动态导入实现按需加载：

components: {
  AsyncComponent: () => import('./AsyncComponent.vue')
}

组件注册方式

全局注册：

Vue.component('GlobalComponent', {...})

局部注册：

export default {
  components: {
    LocalComponent
  }
}

注意事项

• 组件名称需与注册名称严格匹配（区分大小写）
• 动态组件切换时会触发生命周期钩子，使用 keep-alive 时可额外触发 activated/deactivated
• 异步组件需配合 Webpack 等打包工具的代码分割功能使用