vue主动刷新页面及列表数据删除后的刷新实例


Posted in Javascript onSeptember 16, 2018

1.场景

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面,页面是不进行刷新的

2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

3.解决方法

provide / inject 组合

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

vue主动刷新页面及列表数据删除后的刷新实例

tableList.vue:

在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

vue主动刷新页面及列表数据删除后的刷新实例

vue主动刷新页面及列表数据删除后的刷新实例

4.provide / inject 用法

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

==========================================

深入理解数据驱动

以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重。

1. 获取列表方法

vue主动刷新页面及列表数据删除后的刷新实例

2.重新获取数据

vue主动刷新页面及列表数据删除后的刷新实例

3.这样再次调用获取数据,即可同步实现页面数据更新(不会重新刷新页面),同时保证有分页时,能够停留在当前页(刷新前如果是第二页,刷新后依然在第二页),

即其他查询条件保持不变,体验效果好。

以上这篇vue主动刷新页面及列表数据删除后的刷新实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
javascript回到顶部特效
Jul 30 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 #Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 #Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 #Javascript
vue debug 二种方法
Sep 16 #Javascript
Vue刷新修改页面中数据的方法
Sep 16 #Javascript
Vue中使用vux配置代码详解
Sep 16 #Javascript
在vue中安装使用vux的教程详解
Sep 16 #Javascript
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
运动会演讲稿50字
2014/08/25 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
承兑汇票延期证明
2015/06/23 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript