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

Question

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

这是我第一次尝试，使用data中定义的loading连接到与微调组件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没有反应时间更长，不能用于此目的。剩下的唯一方法是让子组件本身在其挂载生命周期事件上对应用程序数据状态执行一些操作，以删除加载微调器，但这似乎有点沉重。有一个更好的方法吗？

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