gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue实现在进行增删改操作后刷新页面由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

问题 。

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

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

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实现在进行增删改操作后刷新页面就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

原文链接:https://blog.csdn.net/weixin_44464482/article/details/88355575 。

最后此篇关于vue实现在进行增删改操作后刷新页面的文章就讲到这里了,如果你想了解更多关于vue实现在进行增删改操作后刷新页面的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com