在有些需求情况下需要重新加载页面或者触发组件的生命周期,但是刷新对用户体验不太友好,这个时候我们可以通过provide/inject可以轻松实现跨级访问祖先组件的数据,使用v-if让App.vue重新加载。
一、在根组件中给router-view动态绑定上v-if。
<template>
<div id="app" ref="app">
<router-view v-if="isRouterShow"/>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
// 通过provide把方法传递给子孙组件使用
return {
reload: this.reload
}
},
data() {
return {
isReload: true // 控制组件显隐
}
},
methods: {
async reload () {
//触发显示隐藏
this.isReload = false;
await this.$nextTick()
this.isReload = true;
},
}
</script>
二、调用重新加载下级组件方法。
这里需要在下级组件中使用inject获取方法进行调用即可。
export default {
inject: ['reload'], //接收App.vue传递的方法
methods: {
reloadHandle () {
this.reload() //直接调用
}
}
}