vue使用keep-alive实现组件切换时保存原组件数据方法


Posted in Javascript onOctober 30, 2020

前言

最近在做一个精品课程后台管理系统,其中涉及文件上传和文件列表展示,我不想将他们写入一个组件,故分开两个组件实现。

问题:但由于上传文件需要时间,这时要是用户切换别的组件查看时,上传文件组件就销毁了,导致文件上传失败。

追求效果:想利用keep-alive实现上传组件切换时仍继续上传文件,而其他组件则不会存活。

使用keep-alive的过程

普通方法:直接使用keep-alive

<keep-alive>
 <router-view />
</keep-alive>

效果:虽然能使上传文件组件存活,在切换组件时仍可继续上传

问题:其余各个组件都不会销毁和重新挂起,导致所有组件的内容不会更新

更好一点的方法:配置路由加以判断是否适用keep-alive

路由js:

//ManageFiles组件需要重新挂起刷新数据,而ManageUploadFile为上传文件组件,故想之存活
{
 path:'files',
 name:'ManageFiles',
 component: () => import('../pages/course/manage/resource/files/Files'),
},
{
 path:'uploadfile',
 name:'ManageUploadFile',
 meta:{
 keepAlive:true  //是否存活标志
 },
 component: () => import('../pages/course/manage/resource/files/UploadFile'),
},

切换组件:

<template>
 <div class="manageResource">
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />
 </div>
</template>

效果图:

(1)一开始为File组件,mounted()打印'我是File'

vue使用keep-alive实现组件切换时保存原组件数据方法

(2)第一次切换为UploadFile组件,mounted()打印'我是UploadFile'

vue使用keep-alive实现组件切换时保存原组件数据方法

(3)再次切换回File组件,mounted()再次重新打印'我是File'

vue使用keep-alive实现组件切换时保存原组件数据方法

(4)最后再次切换回UploadFile组件,因为它一直存活,所以不会重新触发mounted()再次重新打印'我是UploadFile'

vue使用keep-alive实现组件切换时保存原组件数据方法

补充知识:vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染

<!--动态组件-component使用-->
 <div class="app">
 <ul>
 <li @click="currView='home'">首页</li>
 <li @click="currView='abount'">关于我们</li>
 </ul>
 <!--通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留-->
 <keep-alive>
 <component :is="currView"></component>
 </keep-alive>
 </div>
<script type="text/x-Template" id="homeTemp">
  <h2>首页数据</h2>
</script>
<script type="text/x-Template" id="abountTemp">
  <h2>关于我们数据<input type="text"/></h2>
</script>
<script type="text/javascript">
 var vm=new Vue({
 el:'.app',
 data:{
  currView:"home"
 },
 components:{
  "home":{
   template:"#homeTemp"
  },
  "abount":{
  template:"#abountTemp"
  }
 }
 });
 
</script>

vue使用keep-alive实现组件切换时保存原组件数据方法

以上这篇vue使用keep-alive实现组件切换时保存原组件数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
js实现3D照片墙效果
Oct 28 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 #Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 #Javascript
解决Vue-cli无法编译es6的问题
Oct 30 #Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 #Javascript
Vue自定义表单内容检查rules实例
Oct 30 #Javascript
探索node之事件循环的实现
Oct 30 #Javascript
使用TS来编写express服务器的方法步骤
Oct 29 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python中turtle作图示例
2017/11/15 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python识别处理照片中的条形码
2020/11/16 Python
2013届毕业生求职信范文
2013/11/20 职场文书
会计学生自我鉴定
2014/02/06 职场文书
老师的检讨书
2014/02/23 职场文书
初中英语课后反思
2014/04/25 职场文书
开网店计划分析
2019/07/30 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python