24.動態組件

有些場景會需要在兩個組件間來回切換，比如 Tab 界面

我們準備好A B兩個組件ComponentA ComponentA

App.vue代碼如下：

<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"export default {data() {// 初始化組件狀態，決定首先渲染ComponentAreturn {tabComponent: 'ComponentA'}},components: {ComponentA,ComponentB}
}
</script>
<template><!-- 動態組件，根據data中的tabComponent屬性值來決定渲染哪個組件 --><component :is="tabComponent"></component>
</template>

這個時候我們就可以看到頁面顯示：

現在我們加個按鈕來切換組件：

<script>
// 導入組件A
import ComponentA from "./components/ComponentA.vue"
// 導入組件B
import ComponentB from "./components/ComponentB.vue"export default {data() {// 初始化組件狀態，決定首先渲染ComponentAreturn {tabComponent: 'ComponentA'}},components: {// 注冊組件A和組件BComponentA,ComponentB}, methods: {// 切換組件的方法changeHandle() {// 根據當前的tabComponent屬性值來決定切換到哪個組件this.tabComponent = this.tabComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'}}
}
</script>
<template><!-- 動態組件，根據data中的tabComponent屬性值來決定渲染哪個組件 --><component :is="tabComponent"></component><!-- 當用戶點擊按鈕時，調用changeHandle方法來切換組件 --><button @click="changeHandle">切換組件</button>
</template>

此時，我們就可以點擊按鈕切換組件了