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

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

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

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

Контент

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

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

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

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

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

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

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

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

Це прямий канал зв'язку **знизу вгору**:
**child → parent**.

---

## Як працює `$emit` (Options API)

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

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

### Батьківський компонент

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

```js
methods: {
  onChildClick(payload) {
    console.log(payload)  // 42
  }
}
```

---

## Що робить `$emit`?

1. **Викликає користувацьку подію** ("clicked", "save", "update" тощо)
2. **Передає дані батьківському компоненту**
3. Дозволяє **двосторонню взаємодію** між компонентами

---

## Де застосовується `$emit`?

### 1. Для сповіщення батька про події

Наприклад:

```js
this.$emit('submit')
this.$emit('remove', item)
```

### 2. Для кастомного `v-model`

У Vue 3 модель заснована на події:

```js
this.$emit('update:modelValue', newValue)
```

### 3. Для взаємодії між компонентами в дереві

Коли потрібно надіслати дані нагору.

---

## `$emit` у Composition API

У `setup()` `$emit` недоступний напряму, замість нього використовується функція `emit`:

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

У `<script setup>`:

```vue
<script setup>
const emit = defineEmits(['clicked'])

function onClick() {
  emit('clicked', 123)
}
</script>
```

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

Для рев’юера

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

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