Vue3中子组件触发未监听事件问题及Vue2 emit兼容诉求

一、为什么App.vue中的onChange会被触发？ #

你遇到的现象本质是原生DOM事件的冒泡，而非组件自定义事件的穿透：

• MyInput.vue里的<input>是原生DOM元素，它触发的change是原生DOM事件，会沿着DOM树向上正常冒泡。
• Vue3中，当你在组件标签（比如<input-wrap>）上绑定未被组件声明为自定义事件的监听（比如@change）时，Vue会自动把这个事件监听绑定到该组件的根DOM元素上。
• 你的InputWrap组件根元素就是MyInput渲染出的<input>，所以App.vue里绑定的@change实际上是直接监听了这个原生输入框的change事件，输入框触发change时自然会触发onChange回调。

简单来说：这不是组件间自定义事件的“穿透”，是原生事件的正常冒泡行为，Vue3的事件处理逻辑默认会把组件上的非自定义事件绑定到根元素上。

二、如何在Vue3中实现类似Vue2的透明emit机制？ #

Vue2中需要用.native修饰符才能在组件上监听原生事件，自定义事件必须由组件显式$emit才能被父组件捕获。要在Vue3中实现类似的清晰通信逻辑，可通过以下方式：

1. 显式声明组件的emits选项 #

Vue3推荐组件显式声明自己会触发的自定义事件，这样Vue会明确区分自定义事件和原生事件：

• 只有组件通过$emit触发声明过的事件时，父组件的对应回调才会执行。
• 未声明的事件仍会被当作原生事件绑定到根元素，结合inheritAttrs: false可完全屏蔽这种行为。

示例（修改InputWrap.vue）：

<script>
import MyInput from './MyInput.vue';
export default {
  name: 'InputWrap',
  components: { MyInput },
  props: ['modelValue'],
  // 显式声明组件会触发的自定义事件
  emits: ['update:modelValue'],
  methods: {
    onUpdate(v) {
      this.$emit('update:modelValue', v);
    }
  }
}
</script>

2. 使用inheritAttrs: false屏蔽默认属性继承 #

如果不希望组件根元素继承父组件传递的属性（包括事件监听），可以设置inheritAttrs: false，再手动将需要的属性传递给内部元素：

<script>
import MyInput from './MyInput.vue';
export default {
  name: 'InputWrap',
  components: { MyInput },
  props: ['modelValue'],
  emits: ['update:modelValue'],
  // 禁止根元素继承父组件的属性/事件
  inheritAttrs: false,
  methods: {
    onUpdate(v) {
      this.$emit('update:modelValue', v);
    }
  }
}
</script>

<template>
  <!-- 只传递需要的属性，父组件绑定的@change不会被传递 -->
  <my-input :modelValue="modelValue" @update:modelValue="onUpdate" />
</template>

这样设置后，App.vue中绑定的@change不会被绑定到InputWrap的根元素上，只有组件显式$emit的自定义事件才能被父组件捕获，和Vue2的通信逻辑一致。

3. 阻止原生事件冒泡（临时方案） #

如果只是想临时阻止某个原生事件的冒泡，可以在触发事件的元素上使用.stop修饰符：

<!-- MyInput.vue -->
<template>
  <input :value="modelValue" @input="onInput" @change.stop />
</template>

这种方式适合快速处理特定事件，但不够彻底，推荐优先使用前两种方案。

内容的提问来源于stack exchange，提问作者Eugene Karataev