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生成asp.net服务器控件的代码
Feb 04 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
layui实现动态和静态分页
Apr 28 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python多线程学习资料
2012/12/19 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Django model反向关联名称的方法
2018/12/15 Python
python创建n行m列数组示例
2019/12/02 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
tensorflow自定义激活函数实例
2020/02/04 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Java中实现多态的机制
2015/08/09 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
领导干部作风建设总结
2014/10/23 职场文书
寒假致家长的一封信
2015/10/10 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书