两个组件之间来回切换的行为需求--> 动态组件
组件确实切换了，但没有显示，为啥子
重点是：
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>