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 相关文章推荐
面向对象的javascript(笔记)
Oct 06 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
vue-cli3 热更新配置操作
Sep 18 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
用PHP编写PDF文档生成器
2006/10/09 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
非常好的js代码
2006/06/27 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
vue实现搜索过滤效果
2019/05/28 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python正则表达式经典入门教程
2017/05/22 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python实现的堆排序算法示例
2018/04/29 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
平面设计的岗位职责
2013/11/08 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
50岁生日感言
2014/01/23 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
庆元旦活动总结
2014/07/09 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
Docker下安装Oracle19c
2022/04/13 Servers