How do you emit custom events from a child component?

The child calls an emit function with an event name and optional data, and the parent listens with v-on, usually written @. In <script setup> you get that function from defineEmits().

<!-- Child component -->
<script setup>
const emit = defineEmits(['customEvent']) // Declare emitted events
function handleClick() {
  emit('customEvent', 'some data')
}
</script>

<!-- Parent template -->
<child-component @custom-event="handleCustomEvent" />

// Parent component
function handleCustomEvent(data) {
  console.log('Received:', data)
}

Every argument after the event name reaches the parent's handler. Vue converts the case for you, so a camelCase customEvent is heard by a kebab-case @custom-event listener. In the Options API, or directly in a template, you call $emit instead.

Declaring the events is optional but recommended. It documents the component, and Vue then stops passing those listeners down as fallthrough attributes, the attributes a child forwards to its root element. Component events do not bubble, so only the direct parent can listen.