image.png
vue默認(rèn)你傳給組件上的所有事件默認(rèn)傳給最外層的元素。但是假如說(shuō)div包裹住button，onclick事件目標(biāo)div，想讓目標(biāo)是button
讓div不繼承屬性
<script lang="ts">
export default {
inheritAttrs:false
}
</script>
繼承屬性改為false，div不會(huì)再默認(rèn)擁有綁定的事件
讓div里的button綁定$attrs
讓組件中特定的元素繼承事件。$attrs 代表所傳遞的事件，把這個(gè)事件綁定在目標(biāo)元素 v-bind="$attrs"
首先獲取到事件<button v-bind="$attrs">默認(rèn)包含所有人屬性
image.png
屬性分成兩部分
setup(props,context){
const {size,...rest} = context.attrs
return {size,rest}
}
在目標(biāo)元素上 v-bind="rest",rest就是除了size其他屬性
image.png
props和attrs區(qū)別
1.props要先聲明才能取值，attrs不用聲明就可以取值。
2.props不包含事件，attrs包含事件。
3.props支持string以外的類(lèi)型，attrs只有string類(lèi)型。
4.如果props里聲明了一個(gè)變量，那其他沒(méi)有聲明的變量就會(huì)到attrs里面。
