17370845950

在 vue 3 中，若未在子组件中显式声明 `emits: ['click']`，父组件绑定的 `@click` 会同时接收自定义事件和原生 dom 点击事件（含 `pointerevent` 对象），导致 `btnvalue[object pointerevent]` 的异常拼接。根本原因是事件未声明时，vue 无法区分自定义事件与原生事件冒泡。

这个问题的本质在于 Vue 3 的事件解析机制：当组件未通过 emits 选项声明自定义事件时，所有通过 this.$emit() 触发的同名事件（如 'click'）不会被 Vue 视为“组件级事件”，而是与原生 DOM 事件混同处理。此时，父组件上写的 @click="handler" 实际会响应两件事：

1. 子组件内部 触发的原生点击事件（携带 PointerEvent 对象）；
2. 子组件调用 this.$emit('click', value) 发出的自定义事件（携带 btnValue 字符串）。

由于两者事件名相同且未声明，Vue 默认将原生事件对象透传给父组件处理器，于是 value 实际变成了 event 对象，字符串拼接后就出现 btnValue[object PointerEvent] 这类错误输出。

✅ 正确做法是：在 Button.vue 中明确声明 emits: ['click']，让 Vue 知道这是一个受控的自定义事件，从而屏蔽原生 click 的冒泡干扰：

⚠️ 同时注意以下两点避免连锁问题：

• 移除模板中多余的 this. 绑定：原代码 是错误写法 —— @click 自动传入原生事件对象，而 handleClick 内部已可通过 this.btnValue 访问属性。应改为 @click="handleClick" 或更推荐使用箭头函数 @click="() => $emit('click', btnValue)"（组合式 API 下更清晰）；
• 避免事件名冲突：click 是高频原生事件名，建议改用语义化名称（如 'input-value' 或

  

  'append'）以提升可读性与健壮性：

对应地，ButtonPanel.vue 和 Calculator.vue 中的事件监听也需同步更新为 @append="addToExpression" 和 @append="updateExpression"。

? 总结：Vue 3 的 emits 选项不仅是文档提示，更是运行时事件过滤机制的核心。任何自定义事件都必须显式声明，否则将面临原生事件污染、类型不可控、调试困难等问题。养成 defineEmits([...]) + 语义化事件名的习惯，是构建健壮 Vue 组件的基础实践。