vue动态添加组件

Vue 提供了一个内置的组件工厂函数 Vue.component，可以用来动态添加组件。

以下是动态添加组件的步骤：

创建组件

// MyComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在父组件中注册组件工厂函数

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

Vue.component('my-component', MyComponent)

使用动态组件

<template>
  <div>
    <button @click="addComponent">添加组件</button>
    <component v-for="(component, index) in components" :key="index" :is="component.type" :message="component.message"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: []
    }
  },
  methods: {
    addComponent() {
      this.components.push({
        type: 'my-component',
        message: 'Hello, World!'
      })
    }
  }
}
</script>

在上面的例子中，我们使用了 component 组件来动态渲染子组件。在 v-for 循环中，我们为每个动态组件指定了 :is 属性来指定组件类型，并通过 :message 属性传递了相应的数据。在 addComponent 方法中，我们可以通过 this.components.push 来添加新的动态组件