How to emit events in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Emitting events is fundamental for child-to-parent communication in Vue applications, enabling components to notify parents of state changes and user interactions.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented event emission in thousands of Vue components for button clicks, form submissions, and custom interactions in enterprise component libraries.
From my expertise, the most effective approach is to use the $emit method with descriptive event names and proper payload data.
This method provides clean component communication patterns while maintaining loose coupling between parent and child components.
Use $emit method to send custom events from child components to parent components.
<template>
<div>
<button @click="handleClick">{{ label }}</button>
<input
v-model="inputValue"
@input="handleInput"
@keyup.enter="handleSubmit"
>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps(['label', 'initialValue'])
const emit = defineEmits(['click', 'input', 'submit'])
const inputValue = ref(props.initialValue || '')
const handleClick = () => {
emit('click', { timestamp: Date.now() })
}
const handleInput = () => {
emit('input', inputValue.value)
}
const handleSubmit = () => {
emit('submit', { value: inputValue.value })
}
</script>
<!-- Parent component usage: -->
<!-- <CustomInput @click="onButtonClick" @input="onInputChange" @submit="onSubmit" /> -->
The $emit method sends custom events from child to parent components. The first parameter is the event name, and optional additional parameters become the event payload. Define emitted events in the emits option for documentation and validation. Parent components listen to custom events using @event-name="handler" syntax, just like native DOM events. This creates a unidirectional data flow: props down, events up, maintaining clear component boundaries and reusability.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for consistent parent-child communication patterns.
Use kebab-case for event names in templates (@custom-event) and camelCase in JavaScript (this.$emit('customEvent')). Always declare emitted events in the emits option for better component documentation and development experience.
