如何使用Vue.js创建动态组件？

当我们使用Vue.js时，有时需要动态地创建组件，这时可以使用Vue.js提供的动态组件来实现。下面是一个使用Vue.js创建动态组件的示例代码：

<template>
  <div>
    <button v-for="component in components" :key="component.name" @click="currentComponent = component.name">
      {{ component.label }}
    </button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: [
        { name: "ComponentA", label: "组件A" },
        { name: "ComponentB", label: "组件B" },
        { name: "ComponentC", label: "组件C" }
      ],
      currentComponent: "ComponentA"
    }
  },
  components: {
    ComponentA: {
      template: "<div>组件A</div>"
    },
    ComponentB: {
      template: "<div>组件B</div>"
    },
    ComponentC: {
      template: "<div>组件C</div>"
    }
  }
}
</script>

上面的代码定义了一个动态组件，其中通过v-for指令循环渲染了一组按钮，每个按钮对应一个组件，点击按钮时会动态切换展示的组件。

组件的定义使用了Vue.js的components选项，其中每个组件都有一个name属性和一个template属性，name属性用于标识组件，template属性则是组件的模板代码。

在模板中，通过:is指令动态地绑定当前展示的组件，:key属性用于优化性能，避免在切换组件时重新渲染。