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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
js制作简易年历完整实例
Jan 28 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
移动端js图片查看器
Nov 17 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
vue实现点击展开点击收起效果
Apr 27 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
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
求职简历推荐信范文
2013/12/02 职场文书
幼儿教师研修感言
2014/02/12 职场文书
个人函授自我鉴定
2014/03/25 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
小学德育工作总结2015
2015/05/12 职场文书
会议简报格式范文
2015/07/20 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL