vue中$attrs，$props，$listener

首先需要弄清楚的是：
在vue中父类在使用子类组件时，默认将绑定事件传给了子类组件的根元素。

例：
有这样一个组件：

<template>
  <div>
    <button><slot/></button>
  </div>
</template>

1
2
3
4
5
6
7
8
9

使用该组件：
 <Button @click="xxx" @focus="yyy" size="small">I'm button</Button>
1
2

以上例子中，click、focus事件的作用范围是组件的根结点

在子类组件的选项中设置：inheritAttrs:false，组件的根元素就会取消继承，绑定事件无效。

事件无效后，需要将事件手动绑定到想要绑定的组件某元素上，即：
<div><button v-bind="$attrs"></button></div>
1
2

$attrs
$attrs：包含了在使用组件时设置的所有属性，包括绑定事件;
$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>
1
2
3
4
5
6
7
8
9
10

总结
对于属性size而言，如果在组件中props声明过size，那么$attrs里就不会出现size了。虽然inheritAttrs:false，但$attrs里面该有的还是有，只是绑定事件无效了，需要手动绑定一下。
props和$attrs区别通过以上，props和$attrs的区别显而易见。

props 是父类向子类传递并且需要子类主动接收的属性，当然props不包含事件；
$attrs 默认是父类传递到子类根元素的属性，子类不用主动接收，会直接放在子类根元素上。
而$attrs 的这种默认行为，可以通过设置inheritAttrs:false，这些默认行为将会被取消。
1
2
3

其实$attrs，$listeners，$props都是一样的，我们可以通过当前组件实例访问到，具体包含如下：

$attrs：当前组件的属性，通俗的讲也就是在组件标签定义的一系列属性，如input的value，placeholder等，但是不包括在当前组件里面定义的props属性

$listeners：当前组件监听的事件，通俗的讲也就是在使用组件的时候在标签中定义的事件，如@input，以及一些自定义事件@tempFn等

$props：当前组件从父组件那里接收的参数，通俗的讲和$attr差不多，但是只包括在当前组件中定义了的props属性

通俗的讲$attrs+$props = 在使用组件时定义的所有属性，不包括事件

那么在当前组件中使用v-bind=“$attrs"，v-bind="$props”，v-on="$listeners"也就是把之前父组件那里给它的属性再全部传到它的子组件。