问一个VUE3中的useAttrs问题?-灵析社区

winkkkkk9421

定义一个组件: atts import { useAttrs } from "vue" const props = defineProps(['class','title']); let $atts = useAttrs(); console.log($atts); 来调用这个组件的页面: import atts from '../components/atts.vue' const handler = ()=>{ alert('222'); } 运行之后点击页面中的文字atts,你会发现alert弹出了一次。按理说不是应该弹出两次才对的吗? 然后我略微的修改下组件: atts import { useAttrs } from "vue" const props = defineProps(['class','title']); let $atts = useAttrs(); console.log($atts); 这次再来点击中的文字atts,你会发现alert弹出了两次。 啥原因啊?

阅读量:300

点赞量:16

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