3

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

这是我的第一次尝试，使用loadingdefined indata链接到带有v-if="loading". 不幸的是，这不起作用，因为 Vue 似乎没有this为内部函数正确重新绑定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中不再是响应式的，并且不能用于此目的。剩下的唯一方法是让子组件本身在其挂载生命周期事件上对应用程序数据状态执行某些操作以删除加载微调器，但这似乎有点繁重。有一个更好的方法吗？

4

1 回答 1

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);
      });
    },
  },
};
于 2016-11-07T07:43:57.067 回答