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` in Vue is the mechanism by which **a child component sends an event to the parent component**.

In simple terms:
emit is a way for the child to "tell" the parent that something happened inside it.

It is the opposite of props:

| Direction | Mechanism |
|---|---|
| Parent → Child | props |
| Child → Parent | emit |

---

## A simple example: a button tells the parent about a click

#### Child component (`ChildButton.vue`)

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

function handleClick() {
  emit('clicked')
}
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>
```

#### Parent:

```javascript
<ChildButton @clicked="onChildClick" />

---

## What is emit for?

`emit` lets you:

#### Report user actions

- a button click
- text input
- selecting an item

#### Signal internal changes

For example, a form component reports:

```javascript
emit('submit', formData)
```

#### Implement two-way binding (`v-model`)

Vue 3 uses this event for it:

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

This is the foundation of all custom inputs.

---

## How to declare emit?

### Method 1: via `<script setup>` (recommended)

```javascript
const emit = defineEmits(['save', 'delete'])
```

With parameters:

```javascript
emit('save', userData)
```

---

### Method 2: via the Options API

```javascript
export default {
  emits: ['save', 'delete']
}
```

And inside:

```javascript
this.$emit('save', payload)
```

---

## Example: an Input component with v-model

#### Child component:

```javascript
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function updateValue(event) {
  emit('update:modelValue', event.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="updateValue">
</template>
```

#### Usage:

```javascript
<MyInput v-model="username" />
```

`username` updates every time the component sends an emit.

---

## Example: a Modal component reports being closed

```javascript
<script setup>
const emit = defineEmits(['close'])
</script>

<template>
  <div class="modal">
    <button @click="emit('close')">Close</button>
  </div>
</template>
```

Parent:

```javascript
<Modal v-if="open" @close="open = false" />
```

---

## Rules for working with emit

- the event name is a string
- data can be passed: `emit('event', data)`
- you cannot call events that are not in `defineEmits`
- events only flow **bottom to top**

---

## Summary (cheat sheet)

`emit` **is the mechanism for sending events from a child component to the parent.**
It is used for:

- communication between components,
- passing data upward,
- implementing `v-model`,
- reacting to user actions.

The main idea:
props pass data down, emit passes events up.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.