16：vue3 动态组件

A组件

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

B组件

<template>
    <h3>ComponentB</h3>
</template>

 

App.vue

<template>
  <h3>动态组件(A、B两个组件动态切换)</h3>
  <component :is="tabComponent"></component>
  <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"

export default{
    data(){
      return{
        tabComponent:"ComponentA"
      }
    },
    methods:{
      changeHandle(){
        this.tabComponent=this.tabComponent=="ComponentA"?"ComponentB":"ComponentA"
      }
   },
   components:{
    ComponentA,
    ComponentB
   }
    
}
</script>