How to use $emit with parameters in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using $emit with parameters enables powerful parent-child communication by passing data and event details from child to parent components. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented $emit with parameters in thousands of Vue components for enterprise applications. From my expertise, the most effective approach is using descriptive event names with structured parameter objects. This method provides clear component APIs and maintainable parent-child communication.
Use $emit with event name and parameter objects to pass data to parent components.
<!-- Child Component -->
<template>
<button @click="handleClick">Click me</button>
</template>
<script setup>
const emit = defineEmits(['button-clicked'])
const handleClick = () => {
emit('button-clicked', {
timestamp: new Date().toISOString(),
data: 'button data'
})
}
</script>
<!-- Parent Component -->
<template>
<ChildComponent @button-clicked="handleButtonClick" />
</template>
<script setup>
const handleButtonClick = (eventData) => {
console.log('Received:', eventData)
}
</script>
The $emit method accepts the event name as first parameter, followed by any number of additional parameters. Pass structured objects for complex data rather than multiple separate parameters. The parent component receives these parameters in its event handler function arguments.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for component communication. Use descriptive event names and structured parameter objects for maintainable component APIs.
