Component Events

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Declare a custom event
Send a payload
Wire up a listener on the parent

Let's break it down simply

The parent sends data down through props, and the child sends actions back up through events. defineEmits documents which events a component can emit and returns an emit function. Stick to kebab-case for event names.

vue

<!-- QuantityPicker.vue -->
<script setup>
const props = defineProps({ modelValue: Number })
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <button @click="emit('update:modelValue', props.modelValue - 1)">−</button>
  <span>{{ props.modelValue }}</span>
  <button @click="emit('update:modelValue', props.modelValue + 1)">+</button>
</template>

You should see

− 2 +

Try it yourself

Build a TaskItem component with a delete button, and send the task id to the parent as the delete event's payload.

Component Events — Vue.js

Easy traps

Assuming an event will automatically bubble up multiple levels of the component tree
Spelling the event name differently in the parent and the child

Exercise

Build a TaskItem component with a delete button, and send the task id to the parent as the delete event's payload.

You'll know it worked when: − 2 +