首先，从你的组件使用场景来看，咱们默认以Vue框架为例——当你在自定义组件上绑定@change（也就是你说的(change)）时，它默认监听的是该组件主动通过$emit触发的名为change的自定义事件，而非原生DOM的change事件。如果要绑定组件根元素的原生change事件，需要加上.native修饰符（比如@change.native）才行。

为什么文本框失焦会意外触发updateCCode？ #

结合你的场景（dropdown-list组件包含select框和过滤文本框），问题大概率出在组件内部的事件处理逻辑上：

• 正常情况下，select框选中值时，组件会执行$emit('change', 选中的值)，这会触发父组件绑定的updateCCode，完全符合预期。
• 而过滤文本框在编辑后失焦时，会触发原生的change事件（原生input/textarea的change事件触发时机是：元素失去焦点且内容发生了改变）。如果组件内部给这个文本框也绑定了@change="$emit('change', ...)"，或者有其他逻辑在文本框触发原生change时调用了$emit('change')，那父组件监听的@change事件就会被意外触发，进而执行updateCCode。

怎么解决这个问题？ #

• 区分事件名：别让组件的不同操作复用同一个change事件名。比如给select的触发事件命名为select-change，文本框的过滤事件命名为filter-change，父组件分别绑定对应的事件来处理不同逻辑。
• 明确事件触发时机：检查dropdown-list组件内部的代码，确保只有当select框选中值时才emit('change')；文本框的逻辑可以改成监听input事件实时过滤，或者用其他专属事件名来触发，避免和select的事件混淆。

内容的提问来源于stack exchange，提问作者Ankit Dhanna