Question

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

这是我的第一次尝试，使用loading中定义的data链接到带有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中不再具有反应性，并且不能用于此。剩下的唯一方法是让子组件本身在其mount生命周期事件上对应用程序数据状态执行某些操作以删除加载微调器，但这看起来有点沉重。有一个更好的方法吗？

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

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

1 个答案: