H5W3
当前位置:H5W3 > HTML5 > 正文

vue中利用provide和inject实现页面刷新(无白屏)重载组件

1.场景

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

2.遇到的问题

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

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

3.解决方法

provide / inject 组合

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

使用 provide和inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

简单来说就是子孙组件可以访问到祖先的对象方法。

App.vue 文件里写入provide的方法

<!--页面级Vue组件-->
<template>
<div id="app">
<keep-alive>
<router-view v-if="isRouterAlive"></router-view>
</keep-alive>
</div>
</template>

<script>
export default {
name: 'App',
provide () { // 在祖先组件中通过 provide 提供变量
return {
reload: this.reload // 声明一个变量
}
},
data () {
return {
isRouterAlive: true // 控制 router-view 是否显示达到刷新效果
}
},
methods: {
// provide中声明的变量
reload () {
// 通过 this.isRouterAlive 控制 router-view 达到刷新效果
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script> <style>
</style>

然后在需要刷新的子孙组件中用inject注入 App.vue 中provide声明的变量

<template>
<div class="page">
<button @click="reloadFun">刷新</button>
</div>
</template>

<script>
import Vue from 'vue';

export default {
inject:['reload'], // 使用 inject 注入 reload 变量
data(){
return{

}
},
methods: {
reloadFun(){
this.reload(); // 直接使用
}
},

mounted() {}

}
</script>

<style>
</style>

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9296

未经允许不得转载:H5W3 » vue中利用provide和inject实现页面刷新(无白屏)重载组件

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址