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 函数链之演变
Apr 07 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
AngularJS实现路由实例
Feb 12 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php实现求相对时间函数
2015/06/15 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
python处理DICOM并计算三维模型体积
2019/02/26 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
对python中return与yield的区别详解
2020/03/12 Python
Python可以实现栈的结构吗
2020/05/27 Python
python自定义函数def的应用详解
2020/06/03 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
汽车广告策划方案
2014/05/31 职场文书
会议简报格式范文
2015/07/20 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server