vue ですべてのコンポーネントを再レンダリングする方法

---

場合によっては、ページを再読み込みしたり、コンポーネントのライフ サイクルをトリガーしたりする必要がありますが、更新はユーザー エクスペリエンスにとってあまりフレンドリーではありません。現時点では、祖先コンポーネントのデータへのクロスレベル アクセスを簡単に実現できます。 Provide/Inject を使用し、v-if を使用して App .vue をリロードします。

1. v-if をルートコンポーネントの router-view に動的にバインドします。

<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. 下位レベルのコンポーネントを再ロードするメソッドを呼び出します。

ここでは、inject メソッドを使用して下位レベルのコンポーネントを呼び出す必要があります。

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