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

Question

我有一个 vue.js 应用程序，其中有几个像这样的子组件：

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

当页面加载时，我可以使用 ready 钩子来知道组件加载完成。现在，这些组件使用 ajax 数据填充，并且可以通过单击按钮手动更新它们。我可以使用 broadcast 和 dispatch 方法从每个子组件获取数据。但是我想在 s/he 单击按钮时向用户显示预加载器，并在所有 ajax 请求完成后隐藏它。为此，我需要知道所有子组件都已完成加载。我在过去的 4-5 小时内无法做到这一点。 Google 所以并没有太大帮助。

我也尝试过使用 jQuery 的 ajaxStop 但它似乎不适用于 vue-resource。谁能帮帮我？

Answer 1

我需要做一次类似的事情，最后我做了什么（除了使用 v-cloak 在 vue 渲染完成后显示应用程序）是跟踪 data 中的每个 require 变量是否已经有数据（或不），然后才 "display" 应用程序（为此我使用了一个内部标志来控制是显示应用程序还是加载消息）。

与此类似（使用 underscore.js）：

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

由于您使用的是组件，因此您必须使用事件来触发主应用程序上的 showApp 方法。

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

How to know when all child components are loaded in vue.js

ajax

vue.js

vue-resource

vue-component