provide、inject

最外层组件（祖先组件）向其所有子组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效；通过在App.vue，声明reload方法，控制router-view的显示或隐藏，去控制页面刷新。

App.vue

<template><div id="app"><router-view class="container" v-if="isAlive" /></div>
</template><script>
export default {name: "app",data() {return {isAlive: true};},provide() {return {reload: this.reload};},components: {},created() {},methods: {reload() {this.isAlive = false;this.$nextTick(() => {this.isAlive = true;});}}
};
</script>

子组件注入reload方法
inject: [“reload”]
在逻辑完成后，直接this.reload()，即可刷新当前页面；

<template><div class="discovery-wrap">     </div>
</template><script>export default {inject: ["reload"],name: "Discovery",components: {},created() {this.$nextTick(() => {let _self = this;let token = this.token ;if (typeof token == "undefined") {setTimeout(function() {_self.reload();}, 2000);}});},data() {return {token: ""};},computed: {},methods: {},mounted() {}
};
</script>

vue 刷新当前页面、组件；provide、inject相关推荐

最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / inject 组合方式实现vue页面刷新 1.修改 ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
vue刷新当前页面--provide / inject 用法
window.reload()/router.go(0): 采用window.reload(),或者router.go(0)刷新时,整个浏览器重新加载,闪烁.严重影响体验 provide / inje ...
Vue刷新当前页面几种方式
问题: 最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中的问题,下面进行简单总结如下. 姿势一:this.$router.go(0) 这个姿 ...
Vue刷新当前页面（成功）
查了资料一共有三种办法,只试过两种,都成功了,介绍一下. 一.直接路由刷新 vue自带了刷新的办法 this.$router.go(0); 但是这个办法会让整个当前页面刷新,相当于F5.如果项目中只是 ...
vue刷新当前页面，不留白
用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效在App.vue,声明reload方法,控制ro ...
vue 越级传参之provide inject
上一篇咱们说了完全透明的包裹器 $listeners $attrs 实现了更加便捷的父子组件数据传递但是大多情况下组件的嵌套不值一层可能有子组件孙组件等等这种情况简易系统的封装一下组件但是 ...
vue 刷新当前页面
1.首先在app.vue页面加入以下代码: 2.在需要刷新的页面 .
Vue无感刷新当前页面
使用 Vue 选项/组合 Api provide / inject Api 地址,此方法可以实现无感刷新并且不会出现闪烁的空白. 首先在根组件 App.vue 定义这个方法 <template& ...

vue 刷新当前页面、组件；provide、inject

provide、inject

vue 刷新当前页面、组件；provide、inject相关推荐

最新文章

热门文章