vue + element-ui 製做tab切換（切換vue組件，踩坑總結）

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

一、vue如何使用element-uivue

上一篇文章已經分享瞭如何在vue中使用element-ui建立tab組件切換內容（須要瞭解的朋友點擊連接查看）element-ui

二、建立相應文件。函數

　　a、建立父組件 src/components/tabZujian.vueui

　　b、建立自組件（被切換的組件）src/tabComponents 文件夾this

　　+ + tabComponents（目錄）url

　　---- tabZujianChild1.vuespa

　　---- tabZujianChild2.vue.net

三、編寫組件實現tab切換不一樣子組件3d

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顯示也成功了

可是不知道同窗們是否注意到：

　　一、我在每一個子組件的mounted生命週期鉤子函數下分別打印了兩個不一樣的文本

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

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

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

我進來tab頁的時候，兩個組件都發生了請求。也準備好數據。但我切換的時候也可以正常顯示。（成功了？）
可是再次切換的時候你會發現，咱們的數據不會進行請求了。由於組件不會從新渲染了。（怎麼辦？）

有朋友說，我在父組件中請求兩個接口的數據，分別發給子組件。兩個子組件分別使用watch函數進行監聽。若是改變了我就從新更新當前頁面的內容：

固然能夠，這樣寫的話是能夠解決眼前的問題。也能實現我說的效果。
可是有好多須要改變動新的部分，到處都設置watch監聽的話，項目寫着寫着你會發現這樣很亂。

四、解決

其實這個問題解決起來很是簡單，咱們想要的是每次切換tab都可以讓對應的tab子組件進行從新渲染。

初始化兩個變量 isChildUpdate1:true，isChildUpdate2:false；
使用v-if控制child1和child2是否渲染。
每次切換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切換。本身遇到的一些問題，在此進行總結，但願可以幫助到你們。若是有寫的不對或者有出入的地方，還請指正。如需轉載保存，請署上轉載地址。謝謝配合。