如何知道何时将所有子组件加载到vue.js中 [英] How to know when all child components are loaded in vue.js

问题描述

我有一个vue.js应用，其中有几个子组件，如下所示:

I have a vue.js app where there are several child components like this:

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

当页面被加载时，我可以使用 ready 钩子来知道组件已经加载完毕.现在，这些组件是使用ajax数据填充的，可以通过单击按钮进行手动更新.我可以使用 broadcast 和 dispatch 方法从每个子组件中获取数据.但是我想在用户单击按钮时向用户显示一个预加载器，并在所有ajax请求完成时将其隐藏.为此，我需要知道所有子组件都已完成加载.最近4-5个小时我不能做.Google和SO并没有太大帮助.

When the page is loaded, I can use ready hook to know that the components are done loading. Now, these components are filled using ajax data and they can be manually updated by clicking a button. I can get data from each child-component by using broadcast and dispatch methods. But I want to show the user a preloader when s/he clicks on the button and hide it when all ajax requests are finished. For this I need to know that all child-components are finished loading. Which I cannot do for last 4-5 hours. Google and SO didn't help much.

我也尝试过使用jQuery的 ajaxStop ，但是它似乎不适用于vue-resource.谁能帮我吗?

I have also tried using jQuery's ajaxStop but it doesn't seem to work with vue-resource. Can anyone please help me?

推荐答案

我需要做一次类似的事情以及最终要做的事情(除了使用

I needed to do something similar once and what I ended up doing (besides using v-cloak to display the app once vue rendering is done) was tracking whether each require variable in data already had data (or not) and only then, "display" the app (for this I used an internal flag to control whether to display the app or a loading message).

这与此类似(它使用underscore.js):

It was something similar to this (this uses 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 方法.

Since you are using components, you will have to use events to fire the showApp method on the main app.

这篇关于如何知道何时将所有子组件加载到vue.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！