Vue实现动态界面刷新

方法一:适用于没有分页的界面
使用provide和inject配合完成
***provide:Object | () => Object
inject:Array | { [key: string]: string | Symbol | Object }
provide 和 inject 主要为高阶插件/组件库提供用例,是2.2.0版本新增的
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
provide一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名,value 是:在可用的注入内容中搜索用的 key (字符串或 Symbol),或
一个对象,该对象的:
from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default 属性是降级情况下使用的 value


具体使用方法如下:
首先在APP.vue内定义
在这里插入图片描述
this.$nextTick:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。
然后在其他组件内使用reload:
在这里插入图片描述
方法二:适用于带分页的界面
像这种分页的界面,不管是修改还是删除还是其他操作,想在执行相应操作之后,达到动态刷新的效果,如果使用location.reload(),也能达到刷新效果,但是体验不好。
大概思路就是,执行操作成功之后,再调用分页查询方法,把当前页传入,就可以实现效果
在这里插入图片描述
使用的是emelemt的分页组件
在这里插入图片描述
在这里插入图片描述
在方法内调用:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值