问一个VUE3中的useAttrs问题?
定义一个组件:
<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弹出了两次。
啥原因啊?
回答:
在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>
以上是 问一个VUE3中的useAttrs问题? 的全部内容, 来源链接: utcz.com/p/934864.html