Как в Vue компоненты коммуницируют между собой?

Компоненты Vue общаются несколькими способами — выбор зависит от того, насколько далеко они друг от друга.

Родитель → ребёнок: props

<UserCard :user="user" />

Ребёнок → родитель: события

<!-- в дочернем -->
<button @click="emit('remove', user.id)">Удалить</button>
<!-- в родителе -->
<UserCard @remove="onRemove" />

Для двусторонней привязки — v-model (props + событие update:modelValue).

Через несколько уровней: provide / inject

Родитель делает provide('theme', theme), любой потомок получает его через inject('theme').

Общее состояние: store

Для данных, нужных многим несвязанным компонентам, — Pinia (или Vuex).

Прямой доступ: ref

Родитель может вызвать метод ребёнка через ref, но это стоит использовать редко (фокус, прокрутка).

Коротко для собеседования

props вниз, события вверх, provide/inject для глубокой передачи, Pinia для общего состояния, ref — в крайних случаях.

Подробнее: Vue — События компонентов