AI专业者开发社区 1 号成员
  •  0 回帖  •  25 浏览  •  4 个月前
 

vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

本篇文章使用 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>

        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">el-tab-pane </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="tab2"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="second"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="'second'"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">child2</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">child2</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>    
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">el-tab-pane</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">el-tabs</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>



</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">

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">el-tabs </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="activeName"</span><span style="color: rgba(255, 0, 0, 1)"> @tab-click</span><span style="color: rgba(0, 0, 255, 1)">="handleClick"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">el-tab-pane </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="tab1"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="first"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="'first'"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
           <span style="color: rgba(255, 102, 0, 1)"> &lt;child1 v-if="isChildUpdate1"&gt;&lt;/child1&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">el-tab-pane</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">el-tab-pane </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="tab2"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="second"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="'second'"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(255, 102, 0, 1)">&lt;child2 v-if="isChildUpdate2"&gt;&lt;/child2&gt;</span>    
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">el-tab-pane</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">el-tabs</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>



</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(){


},
<span style="color: rgba(255, 102, 0, 1)">methods:{
    handleClick(tab) {
        </span></span><span style="color: rgba(255, 102, 0, 1)"><span style="background-color: rgba(245, 245, 245, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1)">(tab.name </span><span style="background-color: rgba(245, 245, 245, 1)">==</span> <span style="background-color: rgba(245, 245, 245, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1)">first</span><span style="background-color: rgba(245, 245, 245, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1)">) {
            </span><span style="background-color: rgba(245, 245, 245, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1)">.isChildUpdate1 </span><span style="background-color: rgba(245, 245, 245, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1)">true</span><span style="background-color: rgba(245, 245, 245, 1)">;
            </span><span style="background-color: rgba(245, 245, 245, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1)">.isChildUpdate2 </span><span style="background-color: rgba(245, 245, 245, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1)">false</span><span style="background-color: rgba(245, 245, 245, 1)">;
        } </span><span style="background-color: rgba(245, 245, 245, 1)">else</span> <span style="background-color: rgba(245, 245, 245, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1)">(tab.name </span><span style="background-color: rgba(245, 245, 245, 1)">==</span> <span style="background-color: rgba(245, 245, 245, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1)">second</span><span style="background-color: rgba(245, 245, 245, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1)">) {
            </span><span style="background-color: rgba(245, 245, 245, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1)">.isChildUpdate1 </span><span style="background-color: rgba(245, 245, 245, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1)">false</span><span style="background-color: rgba(245, 245, 245, 1)">;
            </span><span style="background-color: rgba(245, 245, 245, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1)">.isChildUpdate2 </span><span style="background-color: rgba(245, 245, 245, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1)">true</span></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"><span style="color: rgba(255, 102, 0, 1)">;
        }
    }
}</span>



}
</script>

这回当你没吃切换 tab 的时候在注意 v8 的 console

成功了

 

最后：

　　本文档意在与帮助初学者快速掌握 tab 切换。自己遇到的一些问题，在此进行总结，希望能够帮助到大家。如果有写的不对或者有出入的地方，还请指正。如需转载保存，请署上 转载地址。谢谢配合。