Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке emit?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`emit` (або `$emit` в Options API) - це механізм у Vue, який дозволяє **дочірньому компоненту надсилати події батьківському компоненту**.

Простіше кажучи:

> `emit` **- це спосіб повідомити батька, що в дочірньому компоненті щось відбулося.**

Це основний канал зв'язку **знизу вгору** (child -> parent).
У Vue 3 використовується функція `emit` всередині `setup()`.

---

## Emit у Composition API (`setup`)

У `setup` emit передається як другий аргумент:

```js
export default {
  setup(props, { emit }) {
    function handleClick() {
      emit('clicked', 123)
    }

return { handleClick }
  }
}
```

Батько слухає:

```html
<Child @clicked="onClick" />
```

---

## Emit у `<script setup>`

Тут використовується `defineEmits`:

```vue
<script setup>
const emit = defineEmits(['save', 'delete'])

function save() {
  emit('save', { id: 1 })
}
</script>
```

---

## Emit в Options API

В Options API використовується `$emit`:

```js
methods: {
  handleClick() {
    this.$emit('clicked', 123)
  }
}
```

---

## Простий приклад

#### Дочірній компонент:

```vue
<button @click="emit('increment')">+</button>
```

#### Батько:

```vue
<Counter @increment="counter++" />
```

Коли користувач натискає кнопку -> батько отримує подію.

---

## Навіщо потрібен emit?

#### 1. Передача даних батьку

Наприклад, користувач обрав товар:

```js
emit('select', item)
```

#### 2. Реалізація `v-model` у компонентах

Ключовий механізм у Vue 3:

```js
emit('update:modelValue', newValue)
```

#### 3. Сигнал батьку про дії

Наприклад:

- збереження
- видалення
- відправлення форми
- зміна стану

#### 4. Підтримка подій у кастомних компонентах

---

## Emit - однонаправлений потік даних

Важливо:

- props йдуть **зверху вниз**
- emit йде **знизу вгору**

Це гарантує передбачувану архітектуру.

---

## Підсумок (ідеально для співбесіди)

> **Emit - це спосіб надсилання користувацьких подій з дочірнього компонента батьківському.**
> **В Options API використовується** `this.$emit`**, у Composition API -** `emit` **із** `setup()` **або** `defineEmits()`**.**
> **Використовується для передачі даних, реакції на дії користувача і реалізації** `v-model`**.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати293 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.