只需一分钟和这篇文章让你学会vue-动态组件

Vue动态组件是指可以通过动态绑定组件的名称来实现动态地切换组件的显示。

通常情况下，我们会使用v-if或v-show来控制组件的显示和隐藏，但是这种方式需要在模板中手动编写多个组件的标签，不够灵活。

而使用Vue动态组件，可以根据不同的条件动态地切换不同的组件。 使用Vue动态组件需要使用标签，并将组件的名称通过is属性绑定到该标签上。例如：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>

在上面的代码中，我们使用标签来显示当前的组件，通过is属性将组件的名称绑定到该标签上。

在data中定义了一个名为currentComponent的属性，初始值为'ComponentA'，表示默认显示ComponentA组件。

在methods中定义了一个名为toggleComponent的方法，用来切换当前显示的组件。在components中注册了ComponentA和ComponentB两个组件，这样就可以在标签中使用它们的名称了。

当点击Toggle Component按钮时，会调用toggleComponent方法，将currentComponent的值切换为'ComponentB'或'ComponentA'，从而动态地切换组件的显示。这种方式可以实现动态地加载不同的组件，提高了组件的重用性和灵活性。