36 动态组件

两个组件之间来回切换的行为需求--> 动态组件
组件确实切换了，但没有显示，为啥子

重点是：
1. <component :is="tabComponent"> </component>
2.    data() {
      return {
        tabComponent: "ComponentB"
      }
    },
3. this.tabComponent= this.tabComponent=="ComponentB"? "ComponentC":"ComponentB"

<template>
  <div>
    <component :is="tabComponent"> </component>
    <button @click="change">切换组件</button>
    <componentB></componentB>
  </div>
</template>

<script>
import componentB from "./components/ComponentB.vue"
import componentC from "./components/ComponentC.vue"
  export default {
    data() {
      return {
        tabComponent: "ComponentB"
      }
    },
    methods: {
      change() {
        this.tabComponent= this.tabComponent=="ComponentB"? "ComponentC":"ComponentB"
        console.log(this.tabComponent)

      }
    },
    components: {
      componentB,
      componentC
    },
  }
</script>

<style lang="scss" scoped>

</style>