What is emit?

VueJunior~1 min read

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" />

<script setup>
function onChildClick() {
  console.log("Child button clicked!")
}
</script>

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.

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.