本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件。
本篇文章使用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
复制代码
<el-tab-pane label="tab2" name="second" :key="'second'"><child2></child2> </el-tab-pane></el-tabs></div>
复制代码
tabZujianChild1.vue
复制代码
我是第一个自组件
复制代码
tabZujianChild2.vue
复制代码
我是第二个子组件
复制代码
默认是tab1显示 切换到tab2显示也成功了
但是不知道同学们是否注意到:
1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本
2、当路由到这个tab页面的时候,应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console
3、当你打开控制台的时候,你会很惊讶的发现。两个组件之中的console都被打印了。这说明,并不是我想象的,tab到1时候打印组件1;tab到2时候打印组件2
有朋友会问,这只是每次进入tab页的时候,同时渲染了2个组件。切换都能正常显示,没什么大问题。但是如果真的这么想就错了-------++++±--------,现在假如我有这样一个需求,每次点击tab切换的时候,组件的数据显示的和上一次的不太相同。也就是没吃tab1 tab2被触发的时候,可能显示的都不太一样。
这时候我们需要在子组件中进行数据请求,请求后台数据。问题就又来了:
我进来tab页的时候,两个组件都发生了请求。也准备好数据。但我切换的时候也能够正常显示。(成功了?)
但是再次切换的时候你会发现,我们的数据不会进行请求了。因为组件不会重新渲染了。(怎么办?)
有朋友说,我在父组件中请求两个接口的数据,分别发给子组件。两个子组件分别使用watch函数进行监听。如果改变了我就重新更新当前页面的内容:
当然可以,这样写的话是可以解决眼前的问题。也能实现我说的效果。
但是有好多需要改变更新的部分,处处都设置watch监听的话,项目写着写着你会发现这样很乱。
4、解决
其实这个问题解决起来非常简单,我们想要的是每次切换tab都能够让对应的tab子组件进行重新渲染。
初始化两个变量 isChildUpdate1:true,isChildUpdate2:false;
使用v-if控制child1和child2是否渲染。
每次切换tab选项的时候,触发事件。让当前点击的tab变量设置位true,让当前组件重新渲染。
这时候当你来回切换的时候,通过v-if判断是否重新渲染当前组件
更改一下tabZujian.vue
复制代码
<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>
复制代码
这回当你没吃切换tab的时候在注意v8的console
成功了
最后:
本文档意在与帮助初学者快速掌握tab切换。自己遇到的一些问题,在此进行总结,希望能够帮助到大家。如果有写的不对或者有出入的地方,还请指正。如需转载保存,请署上 转载地址。谢谢配合。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件。相关推荐
- 【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
- Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
- 一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介 这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
- 在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能 实现效果: 2.1 下 ...
- vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
- element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(二):引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
- iviewui php,Vue UI框架对比:Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
- Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述 问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
最新文章
- Theano3.4-练习之多层感知机
- 快速原型工具 原型可视化
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
- IntelliJ IDEA 添加项目后编译显示包不存在的解决方案
- 洛谷 P2888 [USACO07NOV]牛栏Cow Hurdles
- 4行代码AC——L1-038 新世界 (5分)
- DISCUZ网站DIY后,导致DIY功能失效,无法在前台删除已创建的DIY功能解决办法
- 关于怎么怎么把 unsingned char 数据转换为 Opencv 的Mat类型,并且吧图像显示出来
- 操作系统--进程状态切换以及cpu调度(转)
- 数字和数字根的总和_使用8086微处理器查找8位数字的数字总和
- HOWTO:如何在Redistributables视图中显示所有的水晶报表(Crystal Reports)Merge Module...
- python 论文降重_我用Python写了一个论文降重工具-Go语言中文社区
- 计算机工程与应用 卷号,计算机专业毕业设计软件设计类论文各章节标题与格式规范...
- Taro下拉刷新,上拉加载更多
- RCTF2019web题目复现之rblog和ez4cr
- [ERROR] Couldn‘t set the case sensitive attribute of the directory “\\?\C:\WSL\“.Reason: Indicates
- 关于安全测试面试的30道基础概念题目
- 【附源码】Python计算机毕业设计母婴商品店进出货管理系统
- iOS学习路线图--UIKIt概述
- iOS 图表工具charts之BarChartView
热门文章
- 如何克隆服务器系统数据,Linode面板clone克隆功能实现服务器数据完整迁移
- python立体爱心_总算认识磨砂爱心美甲步骤
- springboot框架笔记——springboot提供的自动配置
- E20180715-hm
- 【#】Spring3 MVC 注解(二)---@RequestMapping
- 【个人笔记】OpenCV4 C++ 图像处理与视频分析 03课
- <matplotlib.lines.Line2D object at 0x7f68cfd5a2e8>终极解决办法
- 限制只允许某个进程调用库
- Glib2之定义手册(十八)
- Linux/Android之sar查看IO/CPU占用率