当前位置：首页 > VUE

vue如何实现动态组件

2026-02-20 17:00:14VUE

Vue 动态组件的实现方法

Vue 提供了 <component> 元素和 is 属性来实现动态组件，允许根据条件或数据动态切换不同的组件。

使用 `<component>` 和 `is` 属性

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

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

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

结合 `v-for` 动态渲染多个组件

如果需要根据数据动态渲染多个不同的组件，可以结合 v-for 使用。

vue如何实现动态组件

<template>
  <div v-for="(item, index) in componentList" :key="index">
    <component :is="item.component" :data="item.data"></component>
  </div>
</template>

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

export default {
  data() {
    return {
      componentList: [
        { component: 'ComponentA', data: { title: '标题A' } },
        { component: 'ComponentB', data: { content: '内容B' } },
      ],
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

使用 `keep-alive` 缓存动态组件

动态组件切换时，默认会销毁和重新创建实例。使用 <keep-alive> 可以缓存组件状态。

vue如何实现动态组件

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

动态加载异步组件

结合 Vue 的异步组件和动态导入，可以实现按需加载组件。

export default {
  data() {
    return {
      currentComponent: null,
    };
  },
  methods: {
    async loadComponent(componentName) {
      this.currentComponent = () => import(`./${componentName}.vue`);
    },
  },
};

通过 `resolveComponent` 动态解析组件

在 Vue 3 中，可以使用 resolveComponent 动态解析组件名称。

import { resolveComponent } from 'vue';

export default {
  setup() {
    const currentComponent = ref('ComponentA');
    const component = computed(() => resolveComponent(currentComponent.value));
    return { component };
  },
};