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

Posted 2023-02-16

【中文标题】显示异步 Vue 2 组件的加载微调器

【英文标题】：Show loading spinner for async Vue 2 components

【发布时间】：2017-01-26 01:34:55

【问题描述】：

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

这是我的第一次尝试，使用在data 中定义的loading 链接到带有v-if="loading" 的微调器组件。不幸的是，这不起作用，因为 Vue 似乎没有为 components 中的函数正确重新绑定 this -

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 不再是反应式的，并且不能用于此。剩下的唯一方法是让子组件本身在其挂载生命周期事件上对应用程序数据状态执行某些操作以删除加载微调器，但这似乎有点繁重。有一个更好的方法吗？

【参考方案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);
      );
    ,
  ,
;