How to track the moment when all child components loaded data in vue js?

Question

Vue.js

Good afternoon, the situation is as follows, there is a component with a content part, when switching this component changes, it can have several child components. Actually, when a component is changed, the preloader is turned on, but how to track the moment when all child components have loaded data (all ajax requests have been completed) and disable the preloader when everything is loaded?

Answer 1

Your child component probably knows its state - whether data is being loaded or not. So, it can signal a change in its state to the parent - with the help of events. And in the parent, you can subscribe to these events. For example (instead of ajax requests, here is the generation of random numbers by timeout, but I think the essence is clear).

Answer 2

It is possible to send a 'ready' event to the parent component after the child has loaded, if the structure is more complex, you can create an event bus .