vue使用provide / inject 组合刷新页面+单独组件刷新

原文链接：https://www.cnblogs.com/leng12/p/xiaoleng.html

一、this.$router.go(0)
相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好；

二、location.reload()
这种也是一样，画面一闪，体验不是很好，相当于页面刷新

推荐解决方法：
三、用provide / inject 组合

原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。

App.vue
在App.vue页面声明

<template><div id="app"><router-view v-if="isRouterAlive"></router-view></div>
</template><script>
export default {name: 'App',provide () {return {reload: this.reload}},data () {return {isRouterAlive: true}},methods: {reload () {this.isRouterAlive = falsethis.$nextTick(function () {this.isRouterAlive = true})}}
}
</script>

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

页面中引用

export default {inject:['reload'],methods:{update(){// 在需要用到的事件中调用this.reload()；函数即可this.reload()    }      } }

原文链接：https://www.cnblogs.com/leng12/p/xiaoleng.html

单独组件刷新

开发过程中会遇到一个页面多个组件，特定条件下，我只想刷新单个组件，不要整个页面重载怎么办。
使用v-if指令：如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。

<Icon type="md-refresh" @click="refreshPage" />
<OrderInfo v-if="isShow"></OrderInfo>
export default {data(){isShow:true},method:{refreshPage(){  // 单独刷新页面console.log("刷新”");this.isShow = false;this.$nextTick(() => {this.isShow = true;})}}
}

总结：页面的刷新分为三步
1、app.vue页面中注入App.vue组件提供（provide）的 reload 依赖
2、页面引用 inject:['reload']
3、将需要刷新的部分绑定 v-if

组件刷新使用vue特性v-if绑定值发生改变页面刷新
1、给组件绑定v-if
2、更改v-if绑定值，使用$nextTick再修改

$nextTick讲解：https://vue3js.cn/interview/vue/nexttick.html#%E4%B8%80%E3%80%81nexttick%E6%98%AF%E4%BB%80%E4%B9%88

vue使用provide / inject 组合刷新页面+单独组件刷新相关推荐

最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / inject 组合方式实现vue页面刷新 1.修改 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
用函数刷新页面内容比刷新页面要好
用函数刷新页面内容比刷新页面要好 app中有时需要更新页面的内容,这个时候可以选择刷新该页面但如果使用函数来更改页面的内容,效果会更好: 例如转载于:https://www.cnblogs.com ...
【vue】— provide/inject的原理
系列文章目录 [VUE]- diff算法原理 [VUE]- watch侦听器原理文章目录系列文章目录一.provide/inject的作用及使用方式二.顺道复习一下组件间的通讯方式吧三.源码 ...
php a 标签后刷新,a链接刷新页面与js刷新页面用法
刷新页面通常是使用a链接与js刷新,至于两者在使用中的区别,在接下来的文章中有详细的介绍,感兴趣的朋友可以了解下 1.a链接的使用操作: 复制代码代码如下:返回上一页刷新当前页 #top的效果在我 ...
a链接刷新页面与js刷新页面总结
1.a链接的使用操作: <a href="javascript:history.go(-1);">返回上一页</a> <a href="#t ...
jq分页不刷新页面_jquery无刷新分页
希望有机会能和大家一起交流学习,220897863程序员之家群欢迎大家加入在现在的项目中使用jquery实现无刷新的分页,数据库采用存储过程进行分页,具体代码就不说了,主要看前段的实现 PageCh ...
jq分页不刷新页面_jQuery无刷新分页完整实例代码
本文实例讲述了jQuery无刷新分页实现方法.分享给大家供大家参考,具体如下: 这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家. 运行效果截图如下: 在线演示地 ...

vue使用provide / inject 组合刷新页面+单独组件刷新

单独组件刷新

vue使用provide / inject 组合刷新页面+单独组件刷新相关推荐

最新文章

热门文章