当前位置:首页 > 前端技术 > vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

2022年08月05日 23:09:42前端技术8

本篇文章使用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显示也成功了

vue + element-ui 制作tab切换(切换vue组件,踩坑总结) _ JavaClub全栈架构师技术笔记  vue + element-ui 制作tab切换(切换vue组件,踩坑总结) _ JavaClub全栈架构师技术笔记

  • 但是不知道同学们是否注意到:

  1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本

  2、当路由到这个tab页面的时候,应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console

  3、当你打开控制台的时候,你会很惊讶的发现。两个组件之中的console都被打印了。这说明,并不是我想象的,tab到1时候打印组件1;tab到2时候打印组件2

vue + element-ui 制作tab切换(切换vue组件,踩坑总结) _ JavaClub全栈架构师技术笔记

 

  • 有朋友会问,这只是每次进入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

vue + element-ui 制作tab切换(切换vue组件,踩坑总结) _ JavaClub全栈架构师技术笔记

成功了

 

最后:

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

 

 

作者:王维璋
来源链接:https://www.cnblogs.com/wangweizhang/p/10251758.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17803.html

标签: vue
分享给朋友:

“vue + element-ui 制作tab切换(切换vue组件,踩坑总结)” 的相关文章

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染

出现情况: 在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式: dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false this.$alert(...

Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从...

Vue中自定义标签及其使用

Vue中自定义标签及其使用

Vue中自定义标签及其使用 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入...

vue.js快速搭建图书管理平台

vue.js快速搭建图书管理平台

上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用。   前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

vue中axios的封装

vue中axios的封装

https://juejin.im/post/5b55c118f265da0f6f1aa354 掘金的网址(很好) 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promi...

vue

vue

用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) 1...

vue3的deep穿透样式

新版的写法: &:deep(input) { text-align: right; color: #555555; } 旧版的写法 /deep/ input{ } >>> input{ }...

vue init webpack 建vue项目报错的解决方法

vue init webpack my-project   C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.ar...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。