Как в vue асинхронно импортировать дочерние компоненты в родительский?

Question

[Nik_Set_7]

Подскажите пожалуйста: есть следующий компонент

<template>
	<div class="homePage">
		<header class="header">
			<HeaderComponent></HeaderComponent>
		</header>

	  	<div class="homePage__block">
	  	  	<div class="homePage__account">
				<account></account>
	  	  	</div>
	  	</div>
	</div>
<template>

<script>
	export default {
		components: { 
			HeaderComponent: () => import('../layout/header-main.vue'),
		},
                mounted () {
                        console.log("Test")
                }
       }
</script>

В дочернем элементе у меня подгрузка информации через axios и мне нужно сделать так, чтобы сначала дочерний компонент получил информацию, а после вывелось в консоли "Test".

Установил babel-plugin-syntax-dynamic-import и создал файл .babelrc в корне проекта.
Код выше не работает, так, как ожидается: ошибок нет, но сначала выводится "Test", а после появляется информация о получении информации в дочернем компоненте.

Как это можно исправить?

UPD:
1. Не корректно указал вопрос: должен был указать "синхронно"
2. Для решения проблемы понадобилась дополнительная общая шина событий. Т.е. она будет подключаться и в родительский, и в дочерний компоненты. Подробное описание здесь:
https://alligator.io/vuejs/global-event-bus/
https://medium.com/@modex13/vue-js-2-%D0%BF%D0%B5%...

3. В дочернем указываем в любом месте, где нам нужно, а в родительском в crated
https://ru.vuejs.org/v2/guide/instance.html#%D0%94...

Comments

[Максим Бич]

Может mounted заменить на created?

Answer 1

[fl3nkey]

Ну так в этом и смысл подгрузки компонентов асинхронно, родитель не будет ждать пока загрузится дочерний асинхронный компонент и вызовет mounted. Вижу несколько вариантов.
1. Грузить компонент синхронно.
2. Использовать $emit

Child.vue

<template>
  <p>Child component</p>
</template>

<script>
export default {
  mounted() {
    //имитируем задержку
    setTimeout(() => {
      this.$emit('load');
    }, 2000);
  }
}
</script>

Parent.vue

<template>
    <h1>Parent component</h1>
    <child @load="onLoad"></child>
</template>

<script>
export default {
  components: {
    child: () => import('child.vue'),
  },
  methods: {
    onLoad() {
      console.log('Child loaded!');
    }
  }
}
</script>

Comments

[Nik_Set_7]

Обновил вопрос