vue动态组件component

Vue中的动态组件可以通过`<component>`标签来实现，通过`is`属性来指定要渲染的组件。当`is`属性的值发生变化时，`<component>`标签会自动销毁旧组件并创建新组件。

以下是一个简单的例子，通过点击按钮来动态切换两个组件：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</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: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>

在上面的例子中，我们通过`<component>`标签来渲染两个组件`ComponentA`和`ComponentB`，并通过`currentComponent`属性来指定当前要渲染的组件。当点击按钮时，`toggleComponent`方法会切换`currentComponent`属性的值，从而实现动态切换组件的效果。