Vue：如何检测所有组件何时完成加载？

lztngnrs 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(237)

我想显示一个加载图标，而所有组件仍在加载，它会消失时，所有组件已完成加载数据。
有没有全局性的方法来知道什么时候所有的东西都被加载了，而不是一个接一个地手动检查组件？
版面配置：

<template>
  <LoadingBar :loadingBar="loadingBar" />
  <NuxtLayout name="root">       
      <slot />       
  </NuxtLayout>
</template>

字符串
页面：使用上述布局的

<template>
 <LazyComponent1 v-cloak /> => run its own data
 <LazyComponent2 v-cloak /> => run its own data
 <LazyComponent3 v-cloak /> => run its own data
</template>

<style lang="sass">
[v-cloak] 
  display: none
</style>

型

vue.js

来源：https://stackoverflow.com/questions/76666982/vue-how-to-detect-when-all-components-have-finished-loading

1条答案

按热度按时间

42fyovps1#

你可以在你的App组件中做这样的事情：

export const eventBus = new Vue();
//...
export default {
  data() {
    return {
      loadingCount: 0, // Number of components still loading
      loadingBar: false // Show/hide the loading bar
    };
  },
  created() {
    eventBus.$on('componentLoading', () => {
      this.loadingCount++;
      this.loadingBar = true;
    });

    eventBus.$on('componentLoaded', () => {
      this.loadingCount--;
      if (this.loadingCount === 0) {
        this.loadingBar = false;
      }
    });
  }
}

字符串
然后从每个子组件导入eventBus，然后在加载数据之前执行eventBus.$emit('componentLoading')，在加载数据时执行eventBus.$emit('componentLoaded');，并基于loadingBar显示/隐藏加载栏

赞(0）回复(0）举报 2023-08-07

我来回答

Vue：如何检测所有组件何时完成加载？

1条答案

相关问题

热门标签

最新问答