Vue.js 显示加载异步Vue 2组件的微调器

我有一个相当重的组件，我希望异步加载，同时在加载时向用户显示一个加载微调器

这是我的第一次尝试，使用

data

中定义的

load

链接到带有

v-if=“load”

的微调器组件。不幸的是，这不起作用，因为对于

组件中的函数，Vue似乎没有正确地重新绑定
此

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
不再是被动的，并且不能用于此。剩下的唯一方法是让子组件本身在应用程序数据状态的mount lifecycle事件中执行一些操作，以删除加载微调器，但这似乎有点繁重。有更好的方法吗
 您可以在对象范围外声明一个变量（但仍然在模块范围内），然后使用
创建的
钩子来附加
此
。因此，更新后的代码如下所示：

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