简单的来说就是在父组件中通过provide
来提供变量,然后在子组件中通过inject
来注入变量
在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 = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>
在需要刷新的页面中注册inject
,用this.reload()
来调用刷新页面
export default {
inject:['reload'],
data () {
return {
...
},
},