javascript - 问一个VUE3中的useAttrs问题？

Question

定义一个组件：

<template>    <div :title="title" class="box" :="$atts">atts</div></template><script lang="ts" setup>import { useAttrs } from "vue"const props = defineProps(['class','title']);let $atts = useAttrs();console.log($atts);</script><style lang="scss" scoped></style>

来调用这个组件的页面：

<template>    <atts class="main" @click="handler" title="222"></atts></template><script lang="ts" setup>import atts from '../components/atts.vue'const handler = ()=>{    alert('222');}</script>

运行之后点击页面中的文字atts,你会发现alert弹出了一次。按理说不是应该弹出两次才对的吗？

然后我略微的修改下组件：

<template><div :title="title">    <div  class="box" :="$atts">atts</div></div></template><script lang="ts" setup>import { useAttrs } from "vue"const props = defineProps(['class','title']);let $atts = useAttrs();console.log($atts);</script><style lang="scss" scoped></style>

这次再来点击中的文字atts,你会发现alert弹出了两次。
啥原因啊？

Answer 1

在vue3里，在父组件中给子组件绑定事件会绑在子组件的根元素上（多个根则不会）即如：
<atts class="main" @click="handler" title="222"></atts>会给atts组件的根元素绑定click事件，如果atts组件内部也绑定click，则两者互不影响，因为两个事件并不是同一个事件句柄，但是如果你用useAttrs，这个API获取的是父组件中除props外的其他属性，那么这时候atts组件获取到的onClick事件回调就和父组件中的一样都是handler这个函数引用，那么在创建DOM时由于两个事件引用一致视为一个，而在例子二中弹两次是因为父组件里的click实际上是绑在了子组件根元素上也就是相当于

<div :title="title" @click="handler">    <div  class="box" @click="handler">atts</div></div>