关于Vue中穿透属性（Fallthrough Attributes）同时作用于根元素与v-bind="$attrs"绑定元素的疑问

嘿，我最近在Vue里折腾穿透属性（Fallthrough Attributes），想给子组件里的按钮传递一个点击事件监听器，用了v-bind="$attrs"来绑定属性。结果耗了好几个小时调试才发现大问题——这个事件监听器居然被注册了两次！一次在子组件的根元素上，一次在我特意绑定$attrs的按钮元素上。

先给大家看最小复现的代码：

父组件（App.vue） #

<script setup lang="ts">
import Comp from './Comp.vue'
</script>

<template>
  <Comp @click="console.log('click')" />
</template>

子组件（Comp.vue） #

<script setup lang="ts"></script>

<template>
  <div style="padding:20px;">
    triggers event once
    <button v-bind="$attrs">triggers event twice</button>
  </div>
</template>

实际测试下来，点击子组件里的根div，事件只会触发一次；但点击按钮的话，直接触发两次。而且不止是事件监听器，不管是传id、Tailwind类名还是其他任何属性，都会被重复应用到根元素和绑定了$attrs的元素上。

更让我困惑的是，在多根模板的组件里，这个行为就完全正常——只有显式绑定$attrs的元素会拿到穿透属性，根元素不会自动继承这些属性。那为什么单根组件的处理逻辑就不一样呢？

从我的使用经验来看，这要么是个bug，要么是个反直觉到离谱的“特性”。有没有熟悉Vue设计逻辑的朋友能解释下这个行为的原因啊？

内容来源于stack exchange