当前位置：首页 > VUE

vue实现动态创建组件

2026-01-22 13:20:28VUE

Vue 动态创建组件的方法

在 Vue 中动态创建组件可以通过多种方式实现，以下是几种常见的方法：

使用 `component` 标签和 `is` 属性

Vue 提供了内置的 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>

使用 `Vue.extend` 和 `$mount`

通过 Vue.extend 可以创建一个组件构造器，然后使用 $mount 手动挂载到 DOM 中。

import Vue from 'vue';
import MyComponent from './MyComponent.vue';

const ComponentConstructor = Vue.extend(MyComponent);
const instance = new ComponentConstructor({
  propsData: {
    propName: 'value'
  }
});
instance.$mount('#mount-point');

使用动态 `import` 和异步组件

结合动态 import 语法可以实现按需加载组件。

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

export default {
  components: {
    AsyncComponent
  }
};

使用 `h` 函数和渲染函数

通过渲染函数可以直接返回虚拟 DOM，实现更灵活的组件创建。

export default {
  render(h) {
    return h('div', [
      h('h1', 'Dynamic Component'),
      h(MyComponent, {
        props: {
          propName: 'value'
        }
      })
    ]);
  }
};

使用 `v-if` 或 `v-show` 控制显示

通过条件渲染指令可以动态切换组件的显示状态。

<template>
  <ComponentA v-if="showComponentA" />
  <ComponentB v-else />
</template>

<script>
export default {
  data() {
    return {
      showComponentA: true
    };
  }
};
</script>