Undeclared Emits Cause Double Event Firing
Impact: HIGH - When a component re-emits a native DOM event (like click) without declaring it in emits, the event can fire twice. This happens because undeclared event listeners become part of $attrs and fall through to the root element, where they listen for native events while your emit() call also fires.
This is a common bug when wrapping native elements or migrating from Vue 2 to Vue 3.
Task Checklist
- [ ] Declare all emitted events in
defineEmits()oremitsoption - [ ] Pay special attention when re-emitting native events (click, input, change, etc.)
- [ ] Check for double firing if component wraps native elements
- [ ] Understand that undeclared listeners fall through to
$attrs
The Problem
Incorrect - Undeclared emit causes double firing:
<!-- MyButton.vue -->
<script setup>
// NO defineEmits declaration!
</script>
<template>
<!-- Native click listener from parent falls through to button -->
<!-- PLUS we re-emit click -->
<button @click="$emit('click', $event)">
<slot></slot>
</button>
</template><!-- Parent.vue -->
<template>
<!-- This handler fires TWICE on each click! -->
<MyButton @click="handleClick">Click me</MyButton>
</template>
<script setup>
function handleClick() {
console.log('clicked') // Logs twice!
}
</script>What happens:
- User clicks the button
- Native click event fires on the button element
@clickfalls through to button (because 'click' isn't in emits), triggeringhandleClick- The button's
@click="$emit('click', $event)"also fires, emitting a component event - Parent's
@click="handleClick"receives the emitted event, triggeringhandleClickagain
The Solution
Correct - Declare the emit:
<!-- MyButton.vue -->
<script setup>
// Declare 'click' as a component event
const emit = defineEmits(['click'])
</script>
<template>
<!-- Now @click="handleClick" in parent only listens to emit() -->
<button @click="emit('click', $event)">
<slot></slot>
</button>
</template><!-- Parent.vue -->
<template>
<!-- Now fires only once -->
<MyButton @click="handleClick">Click me</MyButton>
</template>When you declare click in emits:
- Vue knows
@clickon the component is listening for a component event - The listener does NOT fall through to the root element
- Only your explicit
emit('click')triggers the parent's handler
Options API Version
Correct - Using emits option:
<script>
export default {
emits: ['click', 'input', 'change'],
methods: {
handleClick(event) {
this.$emit('click', event)
}
}
}
</script>Common Scenarios
Wrapping Form Inputs
<!-- CustomInput.vue -->
<script setup>
// Declare all events you re-emit
const emit = defineEmits(['input', 'change', 'focus', 'blur'])
</script>
<template>
<input
@input="emit('input', $event)"
@change="emit('change', $event)"
@focus="emit('focus', $event)"
@blur="emit('blur', $event)"
/>
</template>Wrapper Components
<!-- IconButton.vue -->
<script setup>
const emit = defineEmits(['click'])
</script>
<template>
<button @click="emit('click', $event)">
<Icon :name="icon" />
<slot></slot>
</button>
</template>Alternative: Don't Re-emit, Let It Fall Through
If your component has a single root element and you want native event behavior:
<!-- MyButton.vue -->
<script setup>
// Don't declare 'click' - let it fall through naturally
const emit = defineEmits(['custom-action'])
</script>
<template>
<!-- Native @click from parent falls through to this button -->
<button>
<slot></slot>
</button>
</template><!-- Parent.vue -->
<template>
<!-- This native click falls through to the button -->
<MyButton @click="handleClick">Click me</MyButton>
</template>This works because:
- You don't re-emit 'click' explicitly
- The native click listener falls through to the single root button
- Native click fires once when button is clicked
Debugging Double Firing
<script setup>
function handleClick(event) {
console.log('Event type:', event?.type)
console.log('Is native:', event instanceof Event)
console.trace('Click handler called')
}
</script>If you see two stack traces with different origins, you have the double-firing issue.