【Vue】采用provide/inject方式刷新当前页面

1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

3.解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

tableList.vue:

在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()调用，即可刷新当前页面。

4.provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

==========================================

深入理解数据驱动

以上算是开发过程中的一个坑，用了一段时间，今天再读代码的时候，感觉被坑的很严重。

1. 获取列表方法

2.重新获取数据

3.这样再次调用获取数据，即可同步实现页面数据更新（不会重新刷新页面），同时保证有分页时，能够停留在当前页（刷新前如果是第二页，刷新后依然在第二页），

即其他查询条件保持不变，体验效果好

【Vue】采用provide/inject方式刷新当前页面相关推荐

vue使用provide / inject 组合刷新页面+单独组件刷新
原文链接:https://www.cnblogs.com/leng12/p/xiaoleng.html 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
【vue】— provide/inject的原理
系列文章目录 [VUE]- diff算法原理 [VUE]- watch侦听器原理文章目录系列文章目录一.provide/inject的作用及使用方式二.顺道复习一下组件间的通讯方式吧三.源码 ...
Vue this.$router.go(0) 刷新当前页面在苹果手机无效
this.router.go(0) 和 window.location.reload() 都是刷新当前页面的方法 Vue 写H5页面时,用 this.$router.go(0); 方法刷新当前页面,在 ...
父子/父孙传参（Provide/inject方式）
父组件 export default {data() {return {info: 'AAA'}},// 父组件提供infoprovide() {return {getInfo: this.getIn ...
前端vue/js刷新浏览器页面方法-案例
强制刷新当前页面 reload -- 强迫浏览器刷新当前页面 location.reload([bForceGet]) //重新加载当前文档 bForceGet, 可选参数, 默认为 false,从客 ...
vue新特性provide/inject深入学习
阅读本文帮你你可以在使用provide/inject传递响应式数据时记住一个特性: provide传递的每一个响应式数据都需要值是一个引用不变的可监听对象. 在开发vue项目时,不可避免的需要进行组件 ...
Vue刷新组件,页面刷新
通过:provide / inject 方式实现! Home.vue <keep-alive :include="tagsList" v-if="showView& ...

【Vue】采用provide/inject方式刷新当前页面

【Vue】采用provide/inject方式刷新当前页面相关推荐

最新文章

热门文章