async Vue 2コンポーネントのロードスピナーを表示します。

Question

ロード時にローディングスピナーを表示しながら、非同期にロードしたいコンポーネントがかなりあります。

v-if="loading"のスピナーコンポーネントにリンクされたdataで定義されたloadingを使用してこれが私の最初の試みです。私はまた、いくつかのVue 1.0の例を見つけたが、彼らは$refsに依存

export default { 
    data: { 
    return { 
     loading: false, 
    }; 
    }, 

    components: { 
    // ... 
    ExampleComponent: (resolve) => { 
     // Doesn't work - 'this' is undefined here 
     this.loading = true; 
     require(['./ExampleComponent'], (component) => { 
     this.loading = false; 
     resolve(component); 
     }); 
    }, 
    }, 
}; 

- - 2.0 $refsでノーであることはVueのはcomponents内部機能のための適切thisを再バインドしないようですので、残念ながら、これは動作しません。応答時間が長くなり、これに使用することはできません。残っている唯一の方法は、子コンポーネント自体がアプリケーションのデータ状態にマウントライフサイクルイベントを実行してローディングスピナーを削除することですが、それは少し重いようです。これを行うより良い方法はありますか？

Answer 1

変数をオブジェクトスコープの外に宣言することはできますが（それでもモジュールスコープ内にあります）、createdフックを使用してthisを添付します。更新されたコードは次のようになります：

let vm = {} 

export default { 
    // add this hook 
    created() { 
    vm = this; 
    }, 

    data: { 
    return { 
     loading: false, 
    }; 
    }, 

    components: { 
    // ... 
    ExampleComponent: (resolve) => { 
     // since 'this' doesn't work, we reference outside 'vm' 
     vm.loading = true; 
     require(['./ExampleComponent'], (component) => { 
     vm.loading = false; 
     resolve(component); 
     }); 
    }, 
    }, 
};