Как перерисовать все компоненты в vue

---

В некоторых случаях необходимо перезагрузить страницу или запустить жизненный цикл компонента, но обновление не очень удобно для пользователя.В это время мы можем легко добиться межуровневого доступа к данным компонента-предка. через предоставление/инъекцию и используйте v-if, чтобы позволить App .vue перезагрузиться.

1. Динамически привязать 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>

2. Вызвать метод перезагрузки компонентов нижнего уровня.

Здесь вам нужно использовать метод инъекции для вызова компонентов нижнего уровня.

export default {
    
    
  inject: ['reload'], //接收App.vue传递的方法
  methods: {
    
    
    reloadHandle () {
    
    
      this.reload()  //直接调用
    }
  }
}