1.序言
(1)provide与inject
在实现组件局部刷新之前先来说一说provide与inject方法。
provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙组件,只需要在子孙组件中用inject接收就可以了。
(2)其他的方法实现页面刷新
this.$router.go(0);
location.reload();
这两种方法都是强制刷新页面,会出现短暂的白屏闪烁,不推荐使用。
2.provide与inject实现VUE中组件局部刷新
首先在app.vue写入provide。
app.vue:
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'app',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false
this.$nextTick(()=>{
this.isRouterAlive = true
});
}
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
在需要刷新的组件中用inject接收reload方法,然后调用,即可实现刷新。
export default {
name: "mainBox",
inject:["reload"],
data() {
return {}
},
methods:{
updateData(){
this.reload()
}
}
}