Custom Events in Vue.js
From the Vue.js cheat sheet · Component Communication · verified Jul 2026
Custom Events
Child to parent communication
vue
<!-- Vue 3 Child Component -->
<script setup>
const emit = defineEmits(['update', 'delete'])
function handleClick() {
emit('update', { id: 1, name: 'Updated' })
}
</script>
<!-- Parent listens -->
<ChildComponent
@update="handleUpdate"
@delete="handleDelete"
/>💡 Events bubble up from child to parent components
⚡ Event names should be kebab-case in templates
📌 Vue 3 allows event validation and multiple v-model
🔥 Use update:propName pattern for v-model compatibility