在 Vue SPA 应用中，我们常常需要在页面加载数据或进行异步操作时显示一个全局的 Loading 组件，以提升用户体验。本文将介绍如何在 Vue 应用中实现一个全局 Loading 组件。
实现思路
实现一个全局 Loading 组件的基本思路是：
- 在应用的根组件中定义一个 Loading 组件，并使用
v-if控制其显示和隐藏。 - 在应用的任意组件中，通过一个全局的事件总线来触发显示和隐藏 Loading 组件的事件。
代码实现
定义全局事件总线
我们需要定义一个全局的事件总线，用于在应用的任意组件中触发显示和隐藏 Loading 组件的事件。
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
定义 Loading 组件
我们定义一个 Loading 组件，并在根组件中使用 v-if 控制其显示和隐藏。
-- -------------------- ---- ------- ---- ----------- --- ---------- ---- --------------- --------------- ---- ---------------------- ------ ----------- -------- ------ ------- - ------ - ------ - -------- ----- - -- --------- - -- ------ ----------------------------- -- -- - ------------ - ---- -- ----------------------------- -- -- - ------------ - ----- -- - - --------- ------- -------- - --------- ------ ---- -- ----- -- ------ -- ------- -- ----------------- --------- ---- ---- ----- -------- ----- -------- ----- ---------------- ------- ------------ ------- - -------- - ------- --- ----- -------- ----------- --- ----- -------- -------------- ---- ------ ----- ------- ----- ---------- ---- ---- ------ --------- - ---------- ---- - -- - ---------- ------------- - ---- - ---------- --------------- - - --------展开代码
使用全局事件总线触发 Loading 组件的显示和隐藏
在任意组件中，我们可以使用全局事件总线来触发显示和隐藏 Loading 组件的事件。
-- -------------------- ---- ------- ---- ---------------- --- ---------- ----- ------- -------------------------------- ------ ----------- -------- ------ - -------- - ---- ---------------- ------ ------- - -------- - ----------- - ------------------------------ -- ------ ------------- -- - ------------------------------ -- ----- - - - ---------展开代码
总结
通过定义一个全局的事件总线，我们可以在 Vue SPA 应用中实现一个全局的 Loading 组件，以提升用户体验。这种实现方式比较简单，但需要注意的是，每次触发事件时都会重新渲染根组件，可能会影响性能。如果需要更高效的实现方式，可以考虑使用 Vuex 或第三方库来管理全局状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c34dd8add4f0e0ffd8a9c5
