问一个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

回到顶部