我创建了几个使用自定义事件相互通信的组件。
问题是我在事件传播方面遇到了困难。我有一个App.vue组件，它示例化了一个GeneriqueButton组件，而GeneriqueButton组件又示例化了一个BaseButton组件。我已经在GeneriqueButton上添加了一个带有.stop修饰符的事件侦听器，以防止事件传播到App.vue，但事件仍然冒泡到App.vue，我在控制台中发送了消息。
我不明白为什么尽管使用了.stop修饰符，事件仍然继续传播。我已经验证了事件是从BaseButton发出的，但它仍然被App.vue捕获。
下面是三个组件的代码：
App.vue：

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

<script setup>
import GeneriqueButton from './GeneriqueButton.vue'
function printConsole(event) {
  console.log('App.vue : BaseButton clicked !', event)
}
</script>

GeneriqueButton.vue

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

<script setup>
import BaseButton from './BaseButton.vue'
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>

我在App.vue和GeneriqueButton.vue中使用console.log，每次单击按钮，我的控制台中有2个日志：

。
你知道是什么导致了这个事件传播问题吗？你有什么建议来解决它吗？
提前感谢您的帮助。