\n\n\n```\n\n```vue\n\n\n\n\n```\n\n## Options API\nВ шаблоне или методах: `$emit('increment', payload)`. У родителя — `v-on:increment` / `@increment=\"handler\"`.\n\n## Практика\n\n- Имена событий в шаблоне — kebab-case; для `v-model` на компоненте — `update:modelValue`.\n- Валидация emit через `defineEmits({ increment: (n) => typeof n === 'number' })` помогает ловить ошибки в dev.\n- Каскад emit через 5 уровней — сигнал вынести состояние в Pinia / provide-inject / поднять store выше.\n\n## Итог\nChild → parent = `emit` + listener. Это база кастомных контролов и симметрия к props."}}}

Как ребёнок сообщает родителю через события?

Vue · junior · сложность 4

Войти, чтобы отмечать

Главная мысль

Поток данных вниз — props; вверх — пользовательские события: ребёнок вызывает emit / $emit, родитель слушает @event-name. Так сохраняется однонаправленность: ребёнок не лезет в state родителя напрямую.

Composition API

<!-- Child.vue -->
<script setup>
const emit = defineEmits(['increment'])

function onAdd() {
  emit('increment', 1)
}
</script>

<template>
  <button type="button" @click="onAdd">Add</button>
</template>

<!-- Parent -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const total = ref(0)
</script>

<template>
  <Child @increment="total += $event" />
  <span>Всего: {{ total }}</span>
</template>

Options API

В шаблоне или методах: $emit('increment', payload). У родителя — v-on:increment / @increment="handler".

Практика

Имена событий в шаблоне — kebab-case; для v-model на компоненте — update:modelValue.
Валидация emit через defineEmits({ increment: (n) => typeof n === 'number' }) помогает ловить ошибки в dev.
Каскад emit через 5 уровней — сигнал вынести состояние в Pinia / provide-inject / поднять store выше.

Итог

Child → parent = emit + listener. Это база кастомных контролов и симметрия к props.

Загрузка…