feat(deploy): production deployment setup and fixes
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
This commit is contained in:
yeuimu
+195
-195
@@ -1,195 +1,195 @@
|
||||
---
|
||||
title: Undeclared Emits Cause Double Event Firing
|
||||
impact: HIGH
|
||||
impactDescription: Native events re-emitted without declaration fire twice - once from emit() and once from native listener on root element
|
||||
type: gotcha
|
||||
tags: [vue3, emits, defineEmits, events, native-events, fallthrough]
|
||||
---
|
||||
|
||||
# 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()` or `emits` option
|
||||
- [ ] 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:**
|
||||
```vue
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- 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:**
|
||||
1. User clicks the button
|
||||
2. Native click event fires on the button element
|
||||
3. `@click` falls through to button (because 'click' isn't in emits), triggering `handleClick`
|
||||
4. The button's `@click="$emit('click', $event)"` also fires, emitting a component event
|
||||
5. Parent's `@click="handleClick"` receives the emitted event, triggering `handleClick` again
|
||||
|
||||
## The Solution
|
||||
|
||||
**Correct - Declare the emit:**
|
||||
```vue
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- Parent.vue -->
|
||||
<template>
|
||||
<!-- Now fires only once -->
|
||||
<MyButton @click="handleClick">Click me</MyButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
When you declare `click` in `emits`:
|
||||
- Vue knows `@click` on 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:**
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
emits: ['click', 'input', 'change'],
|
||||
|
||||
methods: {
|
||||
handleClick(event) {
|
||||
this.$emit('click', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Common Scenarios
|
||||
|
||||
### Wrapping Form Inputs
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<!-- 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:
|
||||
|
||||
```vue
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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.
|
||||
|
||||
## Reference
|
||||
- [Vue 3 Migration - emits Option](https://v3-migration.vuejs.org/breaking-changes/emits-option)
|
||||
- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)
|
||||
- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
|
||||
---
|
||||
title: Undeclared Emits Cause Double Event Firing
|
||||
impact: HIGH
|
||||
impactDescription: Native events re-emitted without declaration fire twice - once from emit() and once from native listener on root element
|
||||
type: gotcha
|
||||
tags: [vue3, emits, defineEmits, events, native-events, fallthrough]
|
||||
---
|
||||
|
||||
# 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()` or `emits` option
|
||||
- [ ] 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:**
|
||||
```vue
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- 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:**
|
||||
1. User clicks the button
|
||||
2. Native click event fires on the button element
|
||||
3. `@click` falls through to button (because 'click' isn't in emits), triggering `handleClick`
|
||||
4. The button's `@click="$emit('click', $event)"` also fires, emitting a component event
|
||||
5. Parent's `@click="handleClick"` receives the emitted event, triggering `handleClick` again
|
||||
|
||||
## The Solution
|
||||
|
||||
**Correct - Declare the emit:**
|
||||
```vue
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- Parent.vue -->
|
||||
<template>
|
||||
<!-- Now fires only once -->
|
||||
<MyButton @click="handleClick">Click me</MyButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
When you declare `click` in `emits`:
|
||||
- Vue knows `@click` on 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:**
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
emits: ['click', 'input', 'change'],
|
||||
|
||||
methods: {
|
||||
handleClick(event) {
|
||||
this.$emit('click', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Common Scenarios
|
||||
|
||||
### Wrapping Form Inputs
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<!-- 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:
|
||||
|
||||
```vue
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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.
|
||||
|
||||
## Reference
|
||||
- [Vue 3 Migration - emits Option](https://v3-migration.vuejs.org/breaking-changes/emits-option)
|
||||
- [Vue.js Component Events](https://vuejs.org/guide/components/events.html)
|
||||
- [Vue.js Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
|
||||
|
||||
Reference in New Issue
Block a user