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切换。本身遇到的一些问题，在此进行总结，但愿可以帮助到你们。若是有写的不对或者有出入的地方，还请指正。如需转载保存，请署上转载地址。谢谢配合。