Vue $emit()

Vue $emit() Method

We know that props pass data downwards from a parent to a child.

But what if the child needs to send a message back up to the parent?

To send data upwards, we use the $emit() method.

Emitting Custom Events

A child component can emit a custom event directly from its template.

You use $emit('event-name') inside an inline handler, like a button click.

The parent component can then listen for this exact event name using v-on or @.

<!-- Child Component -->
<button @click="$emit('increment')">Add 1</button>

<!-- Parent Component -->
<ChildComponent @increment="count++" />

Passing Data with $emit

Sometimes you need to send actual data alongside the emitted event.

You can achieve this by passing additional arguments to the $emit function.

The parent component can then receive this data in its method handler.

<!-- Child Component -->
<button @click="$emit('addAmount', 5)">Add 5</button>