VUE动态组件

有些场景会需要在两个组件间来回切换，比如 Tab 界面

<template>
  <h3>ComponentA</h3>
</template>

<template>
 <h3>组件切换</h3>
 ## ：is承载组件姓名
 <component :is="currentTab"></component>
 <button @click="changeComponentHandle">切换</button>
</template>
<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"
export default {
 components: {
  ComponentA,
  ComponentB
  },
 data(){
  return{
   currentTab:"ComponentA",
   }
  },
 methods:{
  changeComponentHandle(){
   this.currentTab = this.currentTab == "ComponentA" ? "ComponentB" : "ComponentA"
   }
  }
}
</script>