1---
2title: Undeclared Emits Cause Double Event Firing
3impact: HIGH
4impactDescription: Native events re-emitted without declaration fire twice - once from emit() and once from native listener on root element
5type: gotcha
6tags: [vue3, emits, defineEmits, events, native-events, fallthrough]
7---
8 
9# Undeclared Emits Cause Double Event Firing
10 
11**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.
12 
13This is a common bug when wrapping native elements or migrating from Vue 2 to Vue 3.
14 
15## Task Checklist
16 
17- [ ] Declare all emitted events in `defineEmits()` or `emits` option
18- [ ] Pay special attention when re-emitting native events (click, input, change, etc.)
19- [ ] Check for double firing if component wraps native elements
20- [ ] Understand that undeclared listeners fall through to `$attrs`
21 
22## The Problem
23 
24**Incorrect - Undeclared emit causes double firing:**
25```vue
26<!-- MyButton.vue -->
27<script setup>
28// NO defineEmits declaration!
29</script>
30 
31<template>
32  <!-- Native click listener from parent falls through to button -->
33  <!-- PLUS we re-emit click -->
34  <button @click="$emit('click', $event)">
35    <slot></slot>
36  </button>
37</template>
38```
39 
40```vue
41<!-- Parent.vue -->
42<template>
43  <!-- This handler fires TWICE on each click! -->
44  <MyButton @click="handleClick">Click me</MyButton>
45</template>
46 
47<script setup>
48function handleClick() {
49  console.log('clicked') // Logs twice!
50}
51</script>
52```
53 
54**What happens:**
551. User clicks the button
562. Native click event fires on the button element
573. `@click` falls through to button (because 'click' isn't in emits), triggering `handleClick`
584. The button's `@click="$emit('click', $event)"` also fires, emitting a component event
595. Parent's `@click="handleClick"` receives the emitted event, triggering `handleClick` again
60 
61## The Solution
62 
63**Correct - Declare the emit:**
64```vue
65<!-- MyButton.vue -->
66<script setup>
67// Declare 'click' as a component event
68const emit = defineEmits(['click'])
69</script>
70 
71<template>
72  <!-- Now @click="handleClick" in parent only listens to emit() -->
73  <button @click="emit('click', $event)">
74    <slot></slot>
75  </button>
76</template>
77```
78 
79```vue
80<!-- Parent.vue -->
81<template>
82  <!-- Now fires only once -->
83  <MyButton @click="handleClick">Click me</MyButton>
84</template>
85```
86 
87When you declare `click` in `emits`:
88- Vue knows `@click` on the component is listening for a component event
89- The listener does NOT fall through to the root element
90- Only your explicit `emit('click')` triggers the parent's handler
91 
92## Options API Version
93 
94**Correct - Using emits option:**
95```vue
96<script>
97export default {
98  emits: ['click', 'input', 'change'],
99 
100  methods: {
101    handleClick(event) {
102      this.$emit('click', event)
103    }
104  }
105}
106</script>
107```
108 
109## Common Scenarios
110 
111### Wrapping Form Inputs
112 
113```vue
114<!-- CustomInput.vue -->
115<script setup>
116// Declare all events you re-emit
117const emit = defineEmits(['input', 'change', 'focus', 'blur'])
118</script>
119 
120<template>
121  <input
122    @input="emit('input', $event)"
123    @change="emit('change', $event)"
124    @focus="emit('focus', $event)"
125    @blur="emit('blur', $event)"
126  />
127</template>
128```
129 
130### Wrapper Components
131 
132```vue
133<!-- IconButton.vue -->
134<script setup>
135const emit = defineEmits(['click'])
136</script>
137 
138<template>
139  <button @click="emit('click', $event)">
140    <Icon :name="icon" />
141    <slot></slot>
142  </button>
143</template>
144```
145 
146## Alternative: Don't Re-emit, Let It Fall Through
147 
148If your component has a single root element and you want native event behavior:
149 
150```vue
151<!-- MyButton.vue -->
152<script setup>
153// Don't declare 'click' - let it fall through naturally
154const emit = defineEmits(['custom-action'])
155</script>
156 
157<template>
158  <!-- Native @click from parent falls through to this button -->
159  <button>
160    <slot></slot>
161  </button>
162</template>
163```
164 
165```vue
166<!-- Parent.vue -->
167<template>
168  <!-- This native click falls through to the button -->
169  <MyButton @click="handleClick">Click me</MyButton>
170</template>
171```
172 
173This works because:
174- You don't re-emit 'click' explicitly
175- The native click listener falls through to the single root button
176- Native click fires once when button is clicked
177 
178## Debugging Double Firing
179 
180```vue
181<script setup>
182function handleClick(event) {
183  console.log('Event type:', event?.type)
184  console.log('Is native:', event instanceof Event)
185  console.trace('Click handler called')
186}
187</script>
188```
189 
190If you see two stack traces with different origins, you have the double-firing issue.
191 
192## Reference
193- [Vue 3 Migration - emits Option](https://v3-migration.vuejs.org/breaking-changes/emits-option)
194- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)
195- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
196