A. 监听“组件自定义事件”（component event）#

这是最标准的理解：父组件在监听子组件 emit('xxx') 出来的事件。

• 子组件：emit('click')
• 父组件：<MyComp @click="fn" />

这时候 不是“给子组件根节点绑定 click”，而是“监听子组件发出来的 click 事件”。

在 Vue3 里你用 defineEmits 声明了事件后，@click 会被当成组件事件来处理（不会自动下落到 DOM）。

B. 作为“原生 DOM 事件监听器下落”（fallthrough）#

Vue3 有个机制叫 属性/监听器下落（fallthrough attrs/listeners）：

• 如果你在组件上写了 @click，但子组件并没有把它当成自定义事件（比如没声明 emits: ['click']），那么它可能会被当成一个普通的 listener，自动绑定到子组件的根 DOM 元素上（如果存在单一根节点）。

这就是你听到的那句“给组件标签绑事件，本质是给根节点绑”。

我想让父组件接收子组件的动作通知 → 用 emit#

子组件：

1
const emit = defineEmits<{
2
  (e: 'submit'): void
3
}>()
4
emit('submit')

父组件：

1
<MyComp @submit="fn" />

我想让父组件传进来的 @click 真的绑到子组件某个 DOM 上 → 显式转发 $attrs#

尤其是多根节点组件，推荐你明确指定绑在哪个元素上（不要指望自动下落）：

1
<script setup lang="ts">
2
defineOptions({ inheritAttrs: false })
3
</script>
4

5
<template>
6
  <button v-bind="$attrs">点我</button>
7
  <div>另一个根</div>
8
</template>

这样父组件写 <MyComp @click="fn" /> 就会明确绑到那个 button 上。