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 mechanism (Options API) that lets **a child component send an event to the parent component**.

In simple terms:

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

This is a direct communication channel **from bottom to top**:
**child → parent**.

---

## How `$emit` works (Options API)

### Child component

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

### Parent component

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

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

---

## What does `$emit` do?

1. **Fires a custom event** ("clicked", "save", "update", etc.)
2. **Passes data to the parent component**
3. Enables **two-way interaction** between components

---

## Where is `$emit` used?

### 1. To notify the parent of events

For example:

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

### 2. For a custom `v-model`

In Vue 3 the model is based on an event:

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

### 3. For interaction between components in the tree

When you need to send data upward.

---

## `$emit` in the Composition API

In `setup()`, `$emit` is not available directly, the `emit` function is used instead:

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

In `<script setup>`:

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

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

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.