Suggest an edit

Improve this article

Refine the answer for “What is $emit?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`$emit` is a Vue component instance method used to **send (emit) custom events from a child component to its parent**.

In simpler terms:

> `$emit` **lets a component "tell" its parent that something happened.**
> **The parent can listen for that event via** `v-on` **/** `@`**.**

This is the key mechanism for *bottom-up* communication in Vue's component architecture.

---

## Basic example: child → parent

### Child component:

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

It "emits" the **increment** event.

### Parent:

```html
<Counter @increment="count++" />
```

Now the parent knows that the child component sent a signal.

---

## Why do you need `$emit`?

- exchanging data *up the tree*
- notifying the parent of a state change
- implementing custom events
- making `v-model` work in custom components
- decomposing logic: a "smart parent, dumb child"

---

## `$emit` + data (passing arguments)

You can send data together with the event:

### Child component:

```js
this.$emit('select', item)
```

### Parent:

```html
<ItemList @select="onItemSelect" />
```

```js
methods: {
  onItemSelect(item) {
    console.log("Selected:", item)
  }
}
```

---

## `$emit` in `v-model` (Vue 3)

For this to work:

```html
<MyInput v-model="value" />
```

The component must:

#### 1) receive the **modelValue** prop

#### 2) emit **update:modelValue**

```html
<input
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>
```

---

## Declaring events (Vue 3)

In Vue 3 you must explicitly declare which events a component can emit:

```js
emits: ['save', 'update:modelValue']
```

Vue will issue a warning if `$emit` is called with an unknown event, which is useful for controlling the component's API.

---

## `$emit` vs $on / $off (Vue 2)

- `$emit` - send an event
- `$on` / `$off` - subscribe/unsubscribe (in **Vue 3 these methods have been removed**)

---

## Important points

#### 1. `$emit` only works *in the direction parent ← child*

A component **cannot call a parent's method directly.**

#### 2. `$emit` does not work from parent to child, only events going up.

#### 3. Event names are best written in **kebab-case**:

```html
@user-selected="handle"
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts333 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.