Vue3声明触发事件章节语句存疑，求具体示例解析

先看Vue3文档里的这段说明：

如果在emits选项中定义了原生事件（例如click），那么监听器现在只会监听组件触发的click事件，而不再响应原生click事件。

下面用两个具体示例帮你理解：

示例1：未在emits中声明原生click事件 #

子组件Child.vue代码：

<template>
  <button>点击按钮</button>
</template>

<script setup>
// 未声明emits选项
</script>

父组件使用该子组件：

<template>
  <Child @click="logMsg" />
</template>

<script setup>
import Child from './Child.vue'

const logMsg = () => {
  console.log('监听到了原生click事件')
}
</script>

此时点击子组件里的按钮，父组件的logMsg会执行——因为按钮的原生click事件会向上冒泡，父组件的@click监听器捕获到的是原生DOM的click事件。

示例2：在emits中声明原生click事件 #

修改子组件Child.vue：

<template>
  <button @click="triggerComponentClick">点击按钮</button>
</template>

<script setup>
// 声明emits包含原生事件名click
const emit = defineEmits(['click'])

const triggerComponentClick = () => {
  // 手动触发组件的click事件
  emit('click')
}
</script>

父组件代码和示例1完全相同。此时：

• 如果子组件没有调用emit('click')，点击按钮后父组件的logMsg不会执行——Vue会把父组件的@click当成监听组件自定义的click事件，不再响应原生DOM的click冒泡。
• 只有当子组件主动调用emit('click')时，父组件的logMsg才会触发。

简单来说：一旦在emits里声明了原生事件名，这个事件就变成了组件的自定义事件，只有组件主动触发它，父组件的监听器才会工作，原生DOM的同名事件不会再触发父组件的监听逻辑。

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