Vue3中阻止自定义事件向根组件传播的问题排查

原因分析 #

1. Vue事件修饰符仅对原生DOM事件生效：你在GeneriqueButton的@base-button.stop中使用的.stop修饰符，只适用于click、mouseover这类原生DOM事件，对自定义事件完全无效，所以无法阻止事件向上传递到App.vue。
2. 未声明组件emits导致事件透传：由于GeneriqueButton和BaseButton都没有通过defineEmits声明自定义事件，Vue会将父组件绑定的未识别事件监听器（比如App.vue中的@base-button）自动附加到组件的根元素上，最终导致BaseButton触发的事件被App.vue捕获。

解决建议 #

方法1：显式声明组件emits并停止事件转发 #

在GeneriqueButton.vue中声明emits，明确组件的事件接口，同时不手动转发事件：

<template>
  <BaseButton @base-button="printConsole" />
</template>

<script setup>
import BaseButton from './BaseButton.vue'
// 声明当前组件的事件接口，此处无需转发事件
defineEmits([])
function printConsole(event) {
  console.log('GeneriqueButton.vue : BaseButton clicked !', event)
}
</script>

同时在BaseButton.vue中规范事件定义：

<template>
  <button type="button" @click="$emit('base-button', $event)">
    Click me
  </button>
</template>

<script setup>
defineEmits(['base-button'])
</script>

方法2：手动控制事件传递逻辑 #

如果需要保留事件对象但阻止透传，只需确保GeneriqueButton不将接收到的事件再次emit即可（无需额外修饰符）：

// GeneriqueButton.vue的script部分
function printConsole(event) {
  console.log('GeneriqueButton.vue : BaseButton clicked !', event)
  // 不执行$emit('base-button')，事件就不会向上传递
}

方法3：避免传递原生事件对象（可选） #

如果不需要原生事件对象，在BaseButton中emit时不要传递$event，可以减少混淆：

<template>
  <button type="button" @click="$emit('base-button')">
    Click me
  </button>
</template>

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