vue 动态创建组件的两种方法

下面是关于“Vue 动态创建组件的两种方法”的完整攻略。

什么是动态创建组件

Vue 是组件化的一个框架，开发者可以将页面分割为不同的组件，然后方便组合和复用。在 Vue 中，我们可以使用普通方式来定义组件，也可以动态的创建组件。

动态创建组件指的是在 Vue 的运行时期，通过代码的方式来生成需要的组件，而不是在模板中直接放置组件。与静态创建的组件相比，动态创建组件可以更加灵活地组合不同的组件，实现更复杂的功能。

Vue 实现动态创建组件的方式有两种：

利用组件的 render 函数
使用 Vue 全局 API component

下面，将分别介绍这两种方式的实现方法。

一. 利用组件的 render 函数

在 Vue 中，每个组件都可以提供一个 render 函数，该函数的返回值将被用于渲染组件的内容。利用组件的 render 函数，就可以在代码中实现动态创建组件。

我们可以通过编写组件的 render 函数，返回一个创建好的组件的虚拟 DOM，然后通过将该虚拟 DOM 加入到其他组件或模板中，实现动态创建组件的效果。

1. render 函数的基本使用

Vue 组件的 render 函数接收一个 createElement 函数作为参数，我们可以用这个函数来创建新的组件节点。

下面是一个简单的示例代码：

<!-- 父组件模板 -->
<template>
  <div>
    <button @click="addDynamicComponent">添加动态组件</button>
    <div ref="dynamicWrapper"></div>
  </div>
</template>
<script>
export default {
  methods: {
    addDynamicComponent() {
      const dynamicComponent = this.$options.render.call(this)   // 通过调用父组件的 render 函数来获取动态组件的虚拟 DOM
      this.$refs.dynamicWrapper.appendChild(dynamicComponent.$el)  // 将虚拟 DOM 转换成真正的 DOM 插入到页面中
    },
    render(h) {
      // 创建动态组件的虚拟 DOM
      return h('div', {
        class: 'dynamic-component',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          color: 'red',
        },
      }, '动态组件')
    }
  }
}
</script>

在这个示例中，我们定义了一个 addDynamicComponent 方法，该方法通过调用父组件的 render 函数来获取动态组件的虚拟 DOM，并将该 DOM 插入到页面的某个位置。

此外，我们还定义了一个 render 函数，用于创建动态组件的虚拟 DOM。在这个函数中，我们使用了 createElement 函数来创建一个 div 元素，并且在 div 中添加了一些样式和文本内容。

2. render 函数动态传参

除了可以在 render 函数中创建静态的组件，我们还可以在 render 函数中动态地传入参数，实现更加复杂的功能。

下面是一个动态创建表单组件的示例代码：

<!-- 父组件模板 -->
<template>
  <div>
    <button @click="addDynamicComponent('text-input-component')">添加文本框组件</button>
    <button @click="addDynamicComponent('select-component')">添加下拉框组价</button>
    <div ref="dynamicWrapper"></div>
  </div>
</template>
<script>
export default {
  methods: {
    addDynamicComponent(componentName) {
      const dynamicComponent = this.$options.render.call(this, componentName)  // 将组件名称作为参数传入 render 函数
      this.$refs.dynamicWrapper.appendChild(dynamicComponent.$el)
    },
    render(h, componentName) {
      // 根据传入的组件名称创建动态组件的虚拟 DOM
      switch (componentName) {
        case 'text-input-component':
          return h('input', {
            attrs: {
              type: 'text',
            },
          })
        case 'select-component':
          return h('select', [
            h('option', {
              domProps: {
                value: 'apple',
              },
            }, '苹果'),
            h('option', {
              domProps: {
                value: 'banana',
              },
            }, '香蕉'),
            h('option', {
              domProps: {
                value: 'orange',
              },
            }, '橙子'),
          ])
        default:
          return h('p', '未知组件类型')
      }
    },
  },
}
</script>

在这个示例中，我们定义了一个 addDynamicComponent 方法，该方法接收一个组件名称作为参数，并通过调用 render 函数来获取指定的动态组件的虚拟 DOM。在 render 函数中，我们使用了 switch 语句来根据传入的组件名称创建不同的虚拟 DOM。

二. 使用 Vue 全局 API component

Vue 还提供了一个 component 全局 API，可以用于动态创建组件。通过调用 component 函数，我们可以创建一个新的 Vue 组件，并且将该组件直接挂载到某个节点下。使用 component 函数，可以非常方便地实现动态创建组件的效果。

下面是一个使用 component 函数创建动态组件的示例代码：

<!-- 父组件模板 -->
<template>
  <div>
    <button @click="addDynamicComponent('text-input-component')">添加文本框组件</button>
    <button @click="addDynamicComponent('select-component')">添加下拉框组件</button>
    <div ref="dynamicWrapper"></div>
  </div>
</template>
<script>
import TextInputComponent from './TextInputComponent.vue'
import SelectComponent from './SelectComponent.vue'

export default {
  components: {
    TextInputComponent,
    SelectComponent,
  },
  methods: {
    addDynamicComponent(componentName) {
      const dynamicComponent = this.createComponent(componentName)   // 使用 createComponent 方法动态创建组件
      dynamicComponent.$mount()   // 手动挂载组件到页面
      this.$refs.dynamicWrapper.appendChild(dynamicComponent.$el)
    },
    createComponent(componentName) {
      switch (componentName) {
        case 'text-input-component':
          return this.$options.components.TextInputComponent  // 直接从当前组件的 components 中获取子组件
        case 'select-component':
          return Vue.component('select-component', {   // 使用 component 函数进行动态创建组件
            template: '<select><option>苹果</option><option>香蕉</option><option>橙子</option></select>',
          })
        default:
          return null
      }
    },
  },
}
</script>

在这个示例中，我们定义了一个 createComponent 方法，该方法根据传入的组件名称创建动态组件，并返回该组件的实例对象。在 createComponent 方法中，我们使用了 switch 语句来判断需要创建的组件类型。

对于 text-input-component 组件，我们直接从当前组件的 components 中获取 TextInputComponent 组件；对于 select-component 组件，我们使用全局 component 函数来进行动态创建。

使用全局 component 函数进行动态创建组件时，需要传入一个组件配置对象作为参数。在该对象中，我们需要使用 template 或者 render 函数来指定组件的内容，并且可以通过 props 属性来传递数据。

这里，我们以 select-component 组件为例，使用 template 属性来指定组件的内容，包含一个 select 元素和三个 option 元素。在实际开发中，我们可以根据需要使用任意的 HTML 元素来动态构造我们需要的组件。