Vue:如何检测所有组件何时完成加载?

您可以在应用程序组件中执行以下操作:

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 显示/隐藏加载栏