vue实现在进行增删改操作后刷新页面


Posted in Javascript onAugust 05, 2020

问题

通常在后台管理项目中,对数据进行增删改查是常规操作。在进行这些操作后,需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

解决方案 || 以删除为例:

1.强制刷新:this.$forceUpdate()

2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁。

3.重新调用接口:但性能较差,代码冗长。

vue实现在进行增删改操作后刷新页面

vue实现在进行增删改操作后刷新页面

4.provide / inject :(推荐)

点此查看VUE官方解释:

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

首先在App.vue全局设置provide

vue实现在进行增删改操作后刷新页面

在需要刷新的操作页面内注入inject:[‘reload']

vue实现在进行增删改操作后刷新页面

在调用接口操作成功后 this.reload( )

比如在删除接口调用成功后:

vue实现在进行增删改操作后刷新页面

划重点

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

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

$nextTick(点击查看vue相关文档)

除此之外,provide和inject的用法主要是:在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

补充知识:vue主动刷新页面及列表数据删除后的刷新方法

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实现在进行增删改操作后刷新页面

4.provide / inject 用法

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

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

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

深入理解数据驱动

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

1. 获取列表方法

vue实现在进行增删改操作后刷新页面

2.重新获取数据

vue实现在进行增删改操作后刷新页面

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

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

以上这篇vue实现在进行增删改操作后刷新页面就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
vue 限制input只能输入正数的操作
Aug 05 #Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
js实现简单选项卡制作
Aug 05 #Javascript
vue 内联样式style中的background用法说明
Aug 05 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
生成sessionid和随机密码的例子
2006/10/09 PHP
学习php笔记 字符串处理
2010/10/19 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
浅析vue深复制
2018/01/29 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python中max函数用法实例分析
2015/07/17 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
制定岗位职责的原则
2013/11/08 职场文书
金融专业推荐信
2013/11/14 职场文书
实习单位推荐信范文
2013/11/27 职场文书
警示教育活动总结
2014/05/05 职场文书
营销团队口号
2014/06/06 职场文书
关于环保的活动方案
2014/08/25 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书