vue.js - 非同期 Vue 2 コンポーネントの読み込みスピナーを表示する

Question

非同期にロードしたいかなり重いコンポーネントがあり、同時に、ロード中にロードスピナーをユーザーに表示します。

loadingこれは私の最初の試みdataですv-if="loading"。this残念ながら、Vue が内部の関数に対して適切に再バインドしていないように見えるため、これは機能しませんcomponents-

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);
      });
    },
  },
};

私はいくつかの Vue 1.0 の例も見つけましたが、それらは依存していました$refs- 2.0 では$refsもはや反応的ではなく、これには使用できません。残された唯一の方法は、子コンポーネント自体がアプリケーション データ状態へのマウント ライフサイクル イベントで何かを実行して、読み込み中のスピナーを削除することですが、それは少し重いようです。これを行うより良い方法はありますか？