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

Posted 2023-02-22

【中文标题】如何知道 vue.js 中何时加载了所有子组件

【英文标题】：How to know when all child components are loaded in vue.js

【发布时间】：2016-09-19 08:09:28

【问题描述】：

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

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

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

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

【参考方案1】：

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

和这个类似（这里使用 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 方法。

【讨论】：

我的问题是我在主组件中有未知数量的子组件。在你的情况下，我想你有三个情况。我该如何处理？

好吧，听起来你需要做更多的工作，也许你可以在主应用程序中“注册”每个组件（通过组件ready）让他知道该组件是“下载”数据，然后使用事件向主应用程序发出组件已完成的信号？在主应用程序上，您可以浏览已注册的组件并检查每个组件是否已完成下载，然后“显示”该应用程序。

不错！我已经进行了更改以向主应用程序发出子组件正在下载数据的信号。但是我怎么知道 all 子组件已经完成下载数据呢？让我换个说法：如何知道 unknown 数量的子组件已完成下载数据？由于 ajax 请求是异步的，所以我别无选择。 （所有请求同时触发）。

好吧，当您注册组件时，初始状态将是“正在下载”或任何最适合您的逻辑，当它完成下载时，它会触发一个事件，让主应用程序知道它已完成下载，在主应用程序上，如果所有组件都已完成下载，您会检查每个事件，这有意义吗？

谢谢！那太棒了。我有最后一个问题，如何知道有多少子组件？