Ajax 如何知道vue.js中何时加载了所有子组件

我有一个vue.js应用程序，其中有以下几个子组件：

<main-app>
   <child-component></child-component>
   <child-component></child-component>
   <child-component></child-component>
...
</main>

...

加载页面时，我可以使用

ready

hook知道组件已经加载完毕。现在，这些组件使用ajax数据填充，可以通过单击按钮手动更新。我可以使用

broadcast

和

dispatch

方法从每个子组件获取数据。但是我想在用户单击按钮时向其显示一个预加载程序，并在所有ajax请求完成时隐藏它。为此，我需要知道所有子组件都已完成加载。在过去的4-5个小时里我都做不到。谷歌和其他公司帮不了多少忙

---

我也尝试过使用jQuery的

ajaxStop

，但它似乎不能与vue资源一起使用。有人能帮我吗？

我需要做一次类似的事情，我最后做的事情（除了在vue渲染完成后显示应用程序）是跟踪

数据中的每个require变量是否已经有数据（或没有），然后才“显示”应用程序（为此，我使用了一个内部标志来控制是显示应用程序还是加载消息）

它与此类似（使用下划线.js）：

由于您使用的是组件，因此必须使用事件在主应用程序上启动
showApp
方法。
我的问题是，主组件中的子组件数量未知。在您的情况下，我认为您有三种情况。在我的情况下，我该如何处理？嗯，听起来您需要对w做更多的工作或者，您可以在主应用程序中“注册”每个组件（通过组件
ready
），让他知道组件正在“下载”数据，然后使用事件向主应用程序发出组件已完成的信号？在主应用程序上，您可以浏览已注册的组件，检查每个组件是否已完成下载，然后“显示”应用程序。很好！我已经做了更改，向主应用程序发出信号，表示子组件正在下载数据。但我如何知道所有子组件都已完成下载数据？让我重新表述一下：如何知道未知数量的子组件已完成下载数据？因为ajax请求是异步的，所以我不知道选项（所有请求同时发出）。注册组件时，初始状态为“下载”或者，无论什么逻辑对你最有效，当它完成下载时，它会触发一个事件，让主应用知道它完成下载，在主应用上你检查每个事件是否所有组件都完成下载，这是有意义的？谢谢！太好了。我还有最后一个问题，如何知道有多少子组件？
var app = new Vue({
    el: 'body',
    data: {
        data1: [],
        data2: [],
        data3: []
    },
    ready: function() {
        this.showApp();

        // Data 1
        $.getJSON('/path-to/data1', function(data) {
            app.$set('data1', data);
            app.showApp();
        });

        // Data 2
        $.getJSON('/path-to/data2', function(data) {
            app.$set('data2', data);
            app.showApp();
        });

        // Data 3
        $.getJSON('/path-to/data3', function(data) {
            app.$set('data3', data);
            app.showApp();
        });
    },
    methods: {
        showApp: function() {
            // Check if all data was loaded
            var requiredData = _.every(['data1', 'data2', 'data3'], function(el) {
                return _.size(this[el]) > 0;
            }, this);

            // If it was, enable the app
            if (requiredData) {
                $(this.$els.loading).hide();
                $(this.$els.app).fadeIn();
            }
        }
    }
});