本篇文章使用vue結合element-ui開發tab切換vue的不同元件，每一個tab切換的都是一個新的元件。

1、vue如何使用element-ui

上一篇文章已經分享瞭如何在vue中使用element-ui建立tab元件切換內容（需要了解的朋友點選連結檢視）

2、建立相應檔案。

　　a、建立父元件 src/components/tabZujian.vue

　　b、建立自元件（被切換的元件）src/tabComponents 資料夾

　　+ + tabComponents（目錄）

　　---- tabZujianChild1.vue

　　---- tabZujianChild2.vue

3、編寫元件實現tab切換不同子元件

tabZujian.vue

<template>
    <div class="tabZujian">
        <el-tabs v-model="activeName">
            <el-tab-pane label="tab1" name="first" :key="'first'">
                <child1></child1>
            </el-tab-pane>
    
            <
 
el-tab-pane label="tab2" name="second" :key="'second'">
                <child2></child2>    
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from 
 
'@/tabComponents/tabZujianChild2'
export default {
    name: 'tabZujian',
    components:{
        child1:tabZujianChild1,
        child2:tabZujianChild2
    },
    data() {
        return {
            //預設第一個選項卡
            activeName: "first",
        }
    },
    mounted(){
        
    }
}
</script>

tabZujianChild1.vue

<template>
    <div class="child1">
        我是第一個自元件
    </div>
</template>

<script>
    export default {
      name: 'child1',
      mounted(){
          console.log("tab1元件")
      }
    }
</script>

tabZujianChild2.vue

<template>
    <div class="child2">
        我是第二個子元件
    </div>
</template>

<script>
    export default {
      name: 'child1',
      mounted(){
          console.log("tab2元件")
      }
    }
</script>

預設是tab1顯示　　　　　　　切換到tab2顯示也成功了

• 但是不知道同學們是否注意到：

　　1、我在每個子元件的mounted生命週期鉤子函式下分別列印了兩個不同的文字

　　2、當路由到這個tab頁面的時候，應該是沒注意控制檯是列印了當前顯示的tab1元件中的console還是tab2元件的console

　　3、當你開啟控制檯的時候，你會很驚訝的發現。兩個元件之中的console都被列印了。這說明，並不是我想象的，tab到1時候列印元件1；tab到2時候列印元件2

• 有朋友會問，這只是每次進入tab頁的時候，同時渲染了2個元件。切換都能正常顯示，沒什麼大問題。但是如果真的這麼想就錯了-------+++++---------，現在假如我有這樣一個需求，每次點選tab切換的時候，元件的資料顯示的和上一次的不太相同。也就是沒吃tab1 tab2被觸發的時候，可能顯示的都不太一樣。
• 這時候我們需要在子元件中進行資料請求，請求後臺資料。問題就又來了：

1. 我進來tab頁的時候，兩個元件都發生了請求。也準備好資料。但我切換的時候也能夠正常顯示。（成功了？）
2. 但是再次切換的時候你會發現，我們的資料不會進行請求了。因為元件不會重新渲染了。（怎麼辦？）

• 有朋友說，我在父元件中請求兩個介面的資料，分別發給子元件。兩個子元件分別使用watch函式進行監聽。如果改變了我就重新更新當前頁面的內容：

1. 當然可以，這樣寫的話是可以解決眼前的問題。也能實現我說的效果。
2. 但是有好多需要改變更新的部分，處處都設定watch監聽的話，專案寫著寫著你會發現這樣很亂。

4、解決

• 其實這個問題解決起來非常簡單，我們想要的是每次切換tab都能夠讓對應的tab子元件進行重新渲染。

1. 初始化兩個變數 isChildUpdate1:true，isChildUpdate2:false；
2. 使用v-if控制child1和child2是否渲染。
3. 每次切換tab選項的時候，觸發事件。讓當前點選的tab變數設定位true，讓當前元件重新渲染。

　　這時候當你來回切換的時候，通過v-if判斷是否重新渲染當前元件

更改一下tabZujian.vue

<template>
    <div class="tabZujian">
        
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="tab1" name="first" :key="'first'">
                <child1 v-if="isChildUpdate1"></child1>
            </el-tab-pane>
    
            <el-tab-pane label="tab2" name="second" :key="'second'">
                <child2 v-if="isChildUpdate2"></child2>    
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
    name: 'tabZujian',
    components:{
        child1:tabZujianChild1,
        child2:tabZujianChild2
    },
    data() {
        return {
            //預設第一個選項卡
            activeName: "first",
            isChildUpdate1:true,
            isChildUpdate2:false
        }
    },
    mounted(){
        
    },
    methods:{
        handleClick(tab) {
            if(tab.name == "first") {
                this.isChildUpdate1 = true;
                this.isChildUpdate2 = false;
            } else if(tab.name == "second") {
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = true;
            }
        }
    }
}
</script>

這回當你沒吃切換tab的時候在注意v8的console

成功了

最後：

　　本文件意在與幫助初學者快速掌握tab切換。自己遇到的一些問題，在此進行總結，希望能夠幫助到大家。如果有寫的不對或者有出入的地方，還請指正。如需轉載儲存，請署上 轉載地址。謝謝配合。