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 相关文章推荐
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
vue中v-model对select的绑定操作
Aug 31 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
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php自定义apk安装包实例
2014/10/20 PHP
js 事件小结 表格区别
2007/08/13 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python编程中的异常处理教程
2015/08/21 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python实现装饰器、描述符
2018/02/28 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
毕业学生推荐信
2013/12/01 职场文书
采购主管的岗位职责
2013/12/17 职场文书
2013的个人自我评价
2013/12/26 职场文书
运动会表扬稿大全
2014/01/16 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
会计的岗位职责
2014/03/15 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript