image.png

vue默認(rèn)你傳給組件上的所有事件默認(rèn)傳給最外層的元素。但是假如說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以外的類型，attrs只有string類型。
4.如果props里聲明了一個(gè)變量，那其他沒有聲明的變量就會(huì)到attrs里面。