Как передавать данные между компонентами во Vue: props и emits?

Props передают данные от родителя к ребёнку, emits — события от ребёнка к родителю. Так сохраняется односторонний поток данных.

Props

<!-- Child.vue -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
});
</script>

Props нельзя менять в дочернем компоненте: изменение должно идти через родителя.

Emits

<script setup>
const emit = defineEmits(['update']);
const save = () => emit('update', 42);
</script>

<!-- Parent.vue -->
<Child :title="t" @update="onUpdate" />

v-model

Сокращение для пары «prop + событие»:

<SearchBox v-model="query" />
<!-- то же, что :modelValue="query" @update:modelValue="query = $event" -->

В Vue 3.4+ есть макрос defineModel(), который упрощает объявление.

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

Данные вниз через props, события вверх через emits. Props не мутируют, двусторонняя связь делается через v-model.