首先需要弄清楚的是：

在vue中父類(lèi)在使用子類(lèi)組件時(shí)，默認(rèn)將綁定事件傳給了子類(lèi)組件的根元素。
例：
有這樣一個(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>上。

1. 在子類(lèi)組件的選項(xiàng)中設(shè)置：inheritAttrs:false，組件的根元素就會(huì)取消繼承，綁定事件無(wú)效。
2. 事件無(wú)效后，需要將事件手動(dòng)綁定到想要綁定的組件某元素上，即：
   <div><button v-bind="$attrs"></button></div>
3. $attrs
   • $attrs：包含了在使用組件時(shí)設(shè)置的所有屬性，包括綁定事件;
   • $attrs等同于setup里面的context.attrs。
     而v-bind="$attrs中，$attrs包含了size和綁定事件，需要分離出來(lái)：

     setup(props, context){
       const {size, ...rest} = context.attrs
       return {size, rest}
     }
   

   那么：v-bind="rest"

   <div><button v-bind="rest"></button></div>
   

• 總結(jié)
  1. 對(duì)于屬性size而言，如果在組件中props聲明過(guò)size，那么$attrs里就不會(huì)出現(xiàn)size了。
  2. 雖然inheritAttrs:false，但$attrs里面該有的還是有，只是綁定事件無(wú)效了，需要手動(dòng)綁定一下。

props和$attrs區(qū)別

通過(guò)以上，props和$attrs的區(qū)別顯而易見(jiàn)。

• props 是父類(lèi)向子類(lèi)傳遞并且需要子類(lèi)主動(dòng)接收的屬性，當(dāng)然props不包含事件；
• $attrs 默認(rèn)是父類(lèi)傳遞到子類(lèi)根元素的屬性，子類(lèi)不用主動(dòng)接收，會(huì)直接放在子類(lèi)根元素上。 而$attrs 的這種默認(rèn)行為，可以通過(guò)設(shè)置inheritAttrs:false，這些默認(rèn)行為將會(huì)被取消。