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 限制数字 js限制输入实现代码
Dec 04 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
javascript数组去重方法分析
Dec 15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
在Vue中使用echarts的方法
Feb 05 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP常用技巧汇总
2016/03/04 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
javascript闭包入门示例
2014/04/30 Javascript
Javascript Objects详解
2014/09/04 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
设置python3为默认python的方法
2018/10/31 Python
详解python中的线程与线程池
2019/05/10 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python数据存储之 h5py详解
2019/12/26 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
大学同学会活动方案
2014/08/20 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014年教研组工作总结
2014/11/26 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL