Vue3 组件传值 props 和 attrs 区别

区别如下：

1、props 要先声明才能取值，attrs 不用先声明

2、props 声明过的属性，attrs 里不会再出现

3、props 不包含事件，attrs 包含

4、props 支持 string 以外的类型，attrs 只有 string 类型

在父组件中我传了三个事件一个属性，在子组件中分别将 props 和 attrs 的值打印出来：

结果显示 props 是一个空对象，而 attrs 中包含了所有父组件传递的方法和属性

将 size 属性在 props 中进行声明，再执行打印，果然 size 属性出现在了 props 对象中，而 attrs 中这次却没有再体现：

接下来我们在父组件中增加一个值为 Boolean 的属性

看到出现在 attrs 中的 disabled 是一个 值为空字符串的属性：

我们在 props 中声明 disabled 为 Boolean 类型：

重新打印结果：

$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ）

inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承

子组件

this.$attrs打印如下：

父组件

效果

不用props接收，就可以获取到父组件传过来的值

$listeners，它是一个对象，里面包含了作用在这个组件上的所有监听器

子组件

this.$listeners打印如下：

父组件

正常情况下，Vue推荐用props向子组件参数。但是在特定场景下，使用 $attrs 会更方便。

考虑最简单的场景，一个滑动输入框组件定义如下：

正常调用它的方式为：

但实际上，我们可以为其额外增加一些属性

这些属性没有在子组件的 props 中，会以原生方式出现在 input 标签中：

由于这里根元素只有一个 <input>，不需要 $attrs 登场，就能完成属性的传递。

例如父组件不变，子组件换成这样定义：

渲染出来的dom如下：

可以看出，我们额外增加的属性并没有传递给 input .

只需给 input 增加一个指令 v-bind="$attrs"

可以看出，额外增加的属性，又成功的传递给了 input 标签。

---