Как дождаться загрузки всех дочерних Vue-компонентов?

Question

[Сергей Примиренков]

Есть родительский компонент Home.vue, в него в цикле загружаются дочерние . Хочу организовать загрузку приложения, чтобы она длилась до того момента, пока последний дочерний компонент не смонтируется. Как это организовать? Исходя из документации прописывать $nextTick в mounted() родителя не даёт нужный результат, то есть код срабатывает практически сразу, а конечная отрисовка страницы много позже.

mounted() {
  this.$nextTick(() => {
    this.loading = false;
  })
},

Answer 1

[Aetae]

На самом деле все компоненты подключены, когда сработал родительский mounted. Если что-то не отображается - вопрос исключительно во внутренней логике ваших компонентов-детей, а значит и решение не универсально, а зависит от этой логики.

Comments

[MaxRyazan]

Уважаемый куратор, вы ошибаетесь. Касаемо vue3 нет гарантий, что при вызове mount родительского компонента все дочерние компоненты уже примонтированы. Об этом прямо написано в документации.
https://v3.ru.vuejs.org/ru/api/options-lifecycle-h...

Есть хак - можно в конце mount дочерного компонента вызвать emit, поймать его в родителе, и например, переключить флаг "isLoaded" в true.
Затем watcher отследить переменную isLoaded, и когда она станет true - после эмита, вызвать свою функцию какую либо.

[Aetae]

MaxRyazan, хз в каких граничных ситуациях такое может быть(требует исследования), но в целом мой ответ верен, а твой нет, потому что у автора происходит явно астнхронщина, никак не связанная с mounted.)

[MaxRyazan]

Aetae, если ваш ответ верен, значит ДОКУМЕНТАЦИЯ вью неверна? Куратор, мне кажется, вы не умеете признавать свои пробелы)
Именно асинхронщина, про которую говорит уважаемый куратор и является причиной того, что я написал про эмит в конце mount. Во вью3 есть эмиты по умолчанию от дочерних компонентов, например @vue:mounted. Он отработает сразу, как mount начнёт свою работу. Но чтобы дождатся полной отработки mount дочернего компонента нужно руками создавать эмит в конце mount и его ловить в родителе.

Так же можно использовать suspense, если нужно. Но в его случае этот вариант не подойдёт.

И простите, но Ваш ответ не дал для разъяснения вопроса НИ-ЧЕ-ГО.

[Aetae]

MaxRyazan, в случае автора никакой mount не имеет никакого значения. Все компоненты с шансом 99% давно примонтированы и только ждут своих данных, которые подгрузятся неизвестно когда. Если что-то и эмитить, то какое-нить кастомное событие типа @loaded, которое в каждом случае будет уникальным для компонента, зависящим от внутренней логики.
Единственные компоненты, в которых эмит в mounted как-то поможет - это асинхронные(defineAsyncComponent), но очень сомнительно что у автора проблема именно и только с ними.