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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
ext 代码生成器
Aug 07 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 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中调用SVN命令更新网站方法
2015/01/07 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
工商学院毕业生个人自我评价
2013/09/19 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
股权转让协议书范本
2014/04/12 职场文书
促销活动总结
2014/04/28 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技