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

vue 专栏收录该内容
2 篇文章 0 订阅

问题

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

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

1.强制刷新:this.$forceUpdate()
2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁。
3.重新调用接口:但性能较差,代码冗长。
在这里插入图片描述
在这里插入图片描述
4.provide / inject :(推荐)
点此查看VUE官方解释
允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

  • 首先在App.vue全局设置provide
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
  • 在需要刷新的操作页面内注入inject:[‘reload’]
    在这里插入图片描述
  • 在调用接口操作成功后 this.reload( )
  • 比如在删除接口调用成功后:
    在这里插入图片描述

划重点

  • provide:一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
  • inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名。
  • $nextTick(点击查看vue相关文档)

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

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

  • 6
    点赞
  • 4
    评论
  • 15
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 4 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

i白月光

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值