vue动态组件实现

Vue 动态组件实现方法

使用 component 标签与 is 属性

通过 Vue 内置的 <component> 标签和 is 属性实现动态组件切换。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>

动态切换组件逻辑

通过方法或计算属性控制 currentComponent 的切换，结合按钮或事件触发。

<template>
  <button @click="toggleComponent">切换组件</button>
  <component :is="currentComponent"></component>
</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> 包裹动态组件可保留其状态，避免重复渲染。

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

动态加载异步组件

结合 defineAsyncComponent 实现按需加载，优化性能。

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}

传递 Props 和监听事件

动态组件仍可正常接收 Props 和触发事件。

<template>
  <component 
    :is="currentComponent" 
    :propName="value"
    @customEvent="handleEvent"
  ></component>
</template>

适用场景

• 标签页切换
• 条件渲染不同UI模块
• 根据权限显示不同组件
• 动态表单字段渲染