首先需要弄清楚的是：
在vue中父類在使用子類組件時(shí)，默認(rèn)將綁定事件傳給了子類組件的根元素刀闷。
例：
有這樣一個(gè)組件：
<template>
<div>
<button><slot/></button>
</div>
</template>
使用該組件：
<Button @click="xxx" @focus="yyy" size="small">I'm button</Button>
以上例子中，click甸昏、focus事件的作用范圍是組件的根結(jié)點(diǎn)<div>顽分，而通常，我們是想在<button>上綁定事件施蜜，所以要取消事件怯邪，然后再手動(dòng)綁定到<button>上。
- 在子類組件的選項(xiàng)中設(shè)置：
inheritAttrs:false花墩，組件的根元素就會(huì)取消繼承，綁定事件無效澄步。 - 事件無效后冰蘑，需要將事件手動(dòng)綁定到想要綁定的組件某元素上，即：
<div><button v-bind="$attrs"></button></div> - $attrs
-
$attrs：包含了在使用組件時(shí)設(shè)置的所有屬性村缸，包括綁定事件; -
$attrs等同于setup里面的context.attrs祠肥。
而v-bind="$attrs中，$attrs包含了size和綁定事件梯皿，需要分離出來：
那么：setup(props, context){ const {size, ...rest} = context.attrs return {size, rest} }v-bind="rest"<div><button v-bind="rest"></button></div> -
- 總結(jié)
- 對于屬性
size而言仇箱，如果在組件中props聲明過size县恕，那么$attrs里就不會(huì)出現(xiàn)size了。 - 雖然
inheritAttrs:false剂桥，但$attrs里面該有的還是有忠烛，只是綁定事件無效了，需要手動(dòng)綁定一下权逗。
- 對于屬性
props和$attrs區(qū)別
通過以上美尸，props和$attrs的區(qū)別顯而易見。
-
props是父類向子類傳遞并且需要子類主動(dòng)接收的屬性斟薇，當(dāng)然props不包含事件师坎； -
$attrs默認(rèn)是父類傳遞到子類根元素的屬性，子類不用主動(dòng)接收堪滨，會(huì)直接放在子類根元素上胯陋。 而$attrs的這種默認(rèn)行為，可以通過設(shè)置inheritAttrs:false袱箱，這些默認(rèn)行為將會(huì)被取消遏乔。
