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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
简单谈谈json跨域
Mar 13 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue插槽slot的理解和使用方法
Apr 03 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
文章推荐系统(二)
2006/10/09 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
公司员工宿舍管理制度
2015/08/07 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
Python编写nmap扫描工具
2021/07/21 Python