Vue子组件刷新同父组件下子组件页面

Vue子组件刷新同父组件下子组件页面

如图：vue单页模式开发中如何点击顶部刷新按钮实现刷新下面内容主体？如果用this.$router.go(0)或者location.reload()体验都比较差，并且是整个页面重新加载，违背了主体刷新的原意。

最初考虑解决方法是点上面刷新按钮调用当前路由页面方法，该方法实现起来比较复杂并且效果不理想，并不是所有页面都有刷新方法。于是查阅相关方法找到一种完美解决思路。
用provide / inject 组合，实现方法如下：

一、Index.vue主框架页面
<div class="layout">

    <!-- 左侧导航区域 -->

    <MyMenu class="menu" :isCollapse="isCollapse" />左侧菜单组件

    <!-- 右侧内容区域 -->

<Top class="top" :class="{ isActive: isCollapse }" @changeCollapse="changeCollapse" :isCollapse="isCollapse"></Top>顶部组件

    <Content class="content" :class="{ isActive: isCollapse }" ref="content"/> 内容主体组件

  </div>  
二、首先在index.vue页面声明一个方法，返回当前页面 的reload，当前页面定义的reload调用conent.vue子组件的刷新方法。

 provide(){//声明一个方法

   return{

   reload:this.reload //返回reload方法

   }

  },

methods: {

reload(){

this.$nextTick(()=>{

this.$refs.content.reload();//调用content子组件中reload方法

})

}

  },

三、Content.vue子组件内容
<router-view v-if="isRefash"></router-view>//路由入口

当前页面定义reload方法，控制路由入口显示和隐藏实现刷新

data() {

return {

isRefash:true

};

},

methods: {

reload(){//子组件的 方法通过控制路由显示刷新当前页面

this.isRefash=false;

this.$nextTick(()=>{

this.isRefash=true;

})

}

}

四、Top.vue页面

JS代码：
inject:["reload"],//子页面注入index.vue父页面方法

刷新按钮点击事件，调用父组件注入的方法。

refresh() {

this.reload()

},