Взаимодействие компонентов во Vue.js?

Question

[nurzhannogerbek]

Здравствуйте, товарищи! Помогите пожалуйста разобраться.

Во Vue.js приложении столкнулся со странным поведением. Есть родительский компонент через который отправляю данные в дочерний.

При клике на метку, которая находится на яндекс карте, открываю информационное окно. Дочерним компонентом, в моем конкретном случаи является информационное окно. Информационное окно открывается мгновенно при клике на метку, но данные в них появляются через 2 секунды. Происходит странное торможение.

Что самое странное, иконка в шапке информационного окна показывается мгновенно, а словосочетание "Детальная информация" показывается за 2 секунды вместе с переданными данными.

Почему статический текст показывается с задержкой? Проблема в скорости передачи данных между компонентами или в скорости отрисовки информационного окна? Не совсем понимаю, что происходит. Как исправить проблему с таким торможение?

Parent.vue:

<template>
	<InformationWindow
		:object_id=object_id
		:object_name=object_id
		:object_address=object_address
		v-if="visable"/>
</template>

<script>
import InformationWindow from './Child.vue';

export default {
	data() {
		return {
			visable: false,
			object_id: null,
			object_name: null,
			object_address: null
		}
	},
	components: {
		InformationWindow,
	},
	methods: {
		geoObjects() {
			***
			// Инициализовать событие нажатие метки
			placemark.events.add('click', () => {
				self.object_id = markers.data[item]["OBJECT_ID"];
				self.object_name = markers.data[item]["OBJECT_NAME"];
				self.object_address = markers.data[item]["OBJECT_ADDRESS"];
				self.visable = true;
			}
			***
		}
	}
}
</script>

Child.vue:

<template>
	<div class="card">
		<div class="card-header text-uppercase text-center">
			<font-awesome-icon :icon="faInfoCircle"/>
			<span>Детальная информация</span>
		</div>
		<div class="card-body">
			<p class="card-text" v-if="object_id">
				<span>Номер:</span><span>{{ object_id }}</span>
			</p>
			<p class="card-text" v-if="object_name">
				<span>Название: </span><span>{{ object_name }}</span>
			</p>
			<p class="card-text"  v-if="object_address">
				<span>Адрес: </span><span>{{ object_address }}</span>
			</p>
		</div>
	</div>
</template>

<script>
export default {
	name: "InformationWindow",
	props: {
		object_id: {
			type: Number
		},
		object_name: {
			type: String
		},
		object_address: {
			type: String
		}
	}
}
</script>

Answer 1

[WebDev]

Никакой задержки в передачи данными между компонентами быть не может. Это у вас в режиме разработчика они компоненты, а в итоге все это собирается в единый файл.
Вы когда кликаете, наверняка аякс запрос идет на Яндекс. Вот его вы и ждете.
Откройте консоль разработчика и посмотрите.

Comments

[nurzhannogerbek]

Здравствуйте! Спасибо за наводку. На самом деле из Яндекса я осознанно ничего не тяну при клике на метку. При клике на метку в разделе "Network" инструмента разработчика заметил следующее:


Первым загружаются стили, вторым идет какая-то загрузка из Яндекса. Что мы тянем из яндекса, вы не знаете что за grab.cur?

В App.vue я устанавливал import стиля, в дочернем компоненте я уже использовал этот стиль для текстов. Видимо загрузка этого стиля и является причиной тормозов.

[Алексей Ярков]

NogerbekNurzhan, расширение .cur как бы намекает на файл кастомного курсора ))

[nurzhannogerbek]

Алексей Ярков, понятно, а можно ли его отключить?