Vue 动态添加组件教程 - 使用 Vue.component() 创建可复用组件

<p>Vue 提供了一个内置的组件工厂函数 <code>Vue.component</code>，可以用来动态添加组件。以下是动态添加组件的步骤：</p>
<ol>
  <li>创建组件</li>
  <pre><code class="language-javascript">// MyComponent.vue
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>
<p></code></pre></p>
  <li>在父组件中注册组件工厂函数</li>
  <pre><code class="language-javascript">import Vue from 'vue'
import MyComponent from './MyComponent.vue'
<p>Vue.component('my-component', MyComponent)
</code></pre></p>
  <li>使用动态组件</li>
  <pre><code class="language-html"><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>
<p></code></pre></p>
<p>在上面的例子中，我们使用了 <code>component</code> 组件来动态渲染子组件。在 <code>v-for</code> 循环中，我们为每个动态组件指定了 <code>:is</code> 属性来指定组件类型，并通过 <code>:message</code> 属性传递了相应的数据。在 <code>addComponent</code> 方法中，我们可以通过 <code>this.components.push</code> 来添加新的动态组件。</p>