1---
2title: Declaring Native Event Names in Emits Blocks Native Listeners
3impact: MEDIUM
4impactDescription: Declaring native events like 'click' in emits prevents native DOM event listeners from working
5type: gotcha
6tags: [vue3, emits, native-events, click, event-collision]
7---
8 
9# Declaring Native Event Names in Emits Blocks Native Listeners
10 
11**Impact: MEDIUM** - When you declare a native DOM event name (like `click`, `input`, `focus`) in your component's `emits` option, listeners for that event will ONLY respond to your component's `emit()` calls. They will no longer respond to the actual native DOM events on the root element.
12 
13This can cause unexpected behavior where clicks seem to stop working on your component.
14 
15## Task Checklist
16 
17- [ ] Understand that declaring native event names changes listener behavior
18- [ ] Always emit the event when you declare it
19- [ ] Don't declare native events if you want fallthrough behavior
20- [ ] Test click/input handling after adding emits declarations
21 
22## The Problem
23 
24**Incorrect - Declaring but not emitting:**
25```vue
26<!-- ClickableCard.vue -->
27<script setup>
28// Declared 'click' but never emit it!
29const emit = defineEmits(['click', 'select'])
30</script>
31 
32<template>
33  <div class="card">
34    <slot></slot>
35  </div>
36</template>
37```
38 
39```vue
40<!-- Parent.vue -->
41<template>
42  <!-- This NEVER fires! Native clicks are blocked -->
43  <ClickableCard @click="handleClick">
44    Click me
45  </ClickableCard>
46</template>
47```
48 
49**Why it fails:**
501. `click` is declared in `emits`
512. Vue treats `@click` as a component event listener
523. Native click on the `<div>` doesn't trigger component event
534. Since `emit('click')` is never called, handler never fires
54 
55## The Solution
56 
57**Option 1: Emit the event explicitly:**
58```vue
59<!-- ClickableCard.vue -->
60<script setup>
61const emit = defineEmits(['click', 'select'])
62</script>
63 
64<template>
65  <!-- Explicitly emit click when div is clicked -->
66  <div class="card" @click="emit('click', $event)">
67    <slot></slot>
68  </div>
69</template>
70```
71 
72**Option 2: Don't declare native events (use fallthrough):**
73```vue
74<!-- ClickableCard.vue -->
75<script setup>
76// Only declare custom events, not native ones
77const emit = defineEmits(['select', 'custom-action'])
78</script>
79 
80<template>
81  <!-- Native @click from parent falls through to this div -->
82  <div class="card">
83    <slot></slot>
84  </div>
85</template>
86```
87 
88```vue
89<!-- Parent.vue -->
90<template>
91  <!-- Native click falls through and works -->
92  <ClickableCard @click="handleClick">
93    Click me
94  </ClickableCard>
95</template>
96```
97 
98## Native Events Affected
99 
100This applies to any native DOM event you might declare:
101 
102| Event | Behavior When Declared |
103|-------|----------------------|
104| `click` | Only responds to `emit('click')`, not native clicks |
105| `input` | Only responds to `emit('input')`, not native input |
106| `change` | Only responds to `emit('change')`, not native change |
107| `focus` | Only responds to `emit('focus')`, not native focus |
108| `blur` | Only responds to `emit('blur')`, not native blur |
109| `submit` | Only responds to `emit('submit')`, not native form submit |
110| `keydown` | Only responds to `emit('keydown')`, not native keydown |
111 
112## When This Is Intentional
113 
114Sometimes you WANT to intercept native events:
115 
116```vue
117<!-- CustomInput.vue -->
118<script setup>
119// Intentionally intercept 'input' to transform the value
120const emit = defineEmits(['input', 'update:modelValue'])
121 
122function handleInput(event) {
123  const transformedValue = event.target.value.toUpperCase()
124  emit('input', transformedValue) // Emit transformed value, not raw event
125  emit('update:modelValue', transformedValue)
126}
127</script>
128 
129<template>
130  <input @input="handleInput" />
131</template>
132```
133 
134Here, declaring `input` is correct because you want to intercept and transform the native event before passing it to the parent.
135 
136## Debugging Tips
137 
138If your click handlers aren't firing:
139 
1401. Check if the event is declared in `emits`
1412. If declared, ensure you're calling `emit('click')` somewhere
1423. If you want native behavior, remove from `emits` declaration
1434. Use Vue DevTools to see which events are being emitted
144 
145```vue
146<script setup>
147const emit = defineEmits(['click'])
148 
149function handleClick(event) {
150  console.log('Native click received, now emitting component event')
151  emit('click', event)
152}
153</script>
154 
155<template>
156  <div @click="handleClick">Click me</div>
157</template>
158```
159 
160## Reference
161- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)
162- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
163