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` (or `$emit` in the Options API) is a mechanism in Vue that lets a **child component send events to the parent component**.

In simple terms:

> `emit` **is a way to tell the parent that something happened in the child component.**

This is the main **bottom-up** channel of communication (child -> parent).
In Vue 3, the `emit` function is used inside `setup()`.

---

## Emit in the Composition API (`setup`)

In `setup`, emit is passed as the second argument:

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

return { handleClick }
  }
}
```

The parent listens:

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

---

## Emit in `<script setup>`

Here `defineEmits` is used:

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

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

---

## Emit in the Options API

In the Options API, `$emit` is used:

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

---

## A simple example

#### Child component:

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

#### Parent:

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

When the user clicks the button, the parent receives the event.

---

## Why is emit needed?

#### 1. Sending data to the parent

For example, the user selected a product:

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

#### 2. Implementing `v-model` in components

A key mechanism in Vue 3:

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

#### 3. Signaling actions to the parent

For example:

- saving
- deleting
- submitting the form
- state changes

#### 4. Support for events in custom components

---

## Emit is a one-directional data flow

Important:

- props flow **top-down**
- emit flows **bottom-up**

This ensures a predictable architecture.

---

## Summary (great for an interview)

> **Emit is a way to send custom events from a child component to the parent.**
> **The Options API uses** `this.$emit`**, the Composition API uses** `emit` **from** `setup()` **or** `defineEmits()`**.**
> **It's used for sending data, reacting to user actions, and implementing** `v-model`**.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.