如何使用vue2动态组件

使用Vue2动态组件非常简单。Vue2提供了一个内置的组件 `<component>`，可以用来动态渲染不同的组件。

假设你有两个组件，分别是 `ComponentA` 和 `ComponentB`，你可以使用下面的代码来动态渲染这两个组件：

<template>
  <div>
    <button @click="showComponentA">Show Component A</button>
    <button @click="showComponentB">Show Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: null
    }
  },
  methods: {
    showComponentA() {
      this.currentComponent = 'ComponentA'
    },
    showComponentB() {
      this.currentComponent = 'ComponentB'
    }
  }
}
</script>

在上面的代码中，我们通过 `:is` 属性来指定当前要渲染的组件。在 `data` 中，我们定义了一个 `currentComponent` 变量来保存当前要渲染的组件名，然后通过 `methods` 中的 `showComponentA` 和 `showComponentB` 方法来切换要渲染的组件。

注意，我们需要在 `components` 中先注册要渲染的组件，才能在 `<component>` 中使用它们。

希望这个例子能够帮助你理解如何使用Vue2动态组件。