在vue中如何重新渲染所有组件

---

在有些需求情况下需要重新加载页面或者触发组件的生命周期，但是刷新对用户体验不太友好，这个时候我们可以通过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()  //直接调用
    }
  }
}