Vue3组件传值之props与attrs的区别

$attrs 属性可以看做 props 的加强版,用来简化 vue 组件传值
先说区别:

  • props 要先声明才能取值,attrs 不用先声明
  • props 声明过的属性,attrs 里不会再出现
  • props 不包含事件,attrs 包含
  • props 支持 string 以外的类型,attrs 只有 string 类型

下面我们举例说明

在父组件中我们传三个时间一个属性,在子组件中分别将props和attrs的值打印出来
结果显示 props 是一个空对象,而 attrs 中包含了所有父组件传递的方法和属性

那如果我们在子组件中声明了 props 呢?

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

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

看到出现在 attrs 中的 disabled 是一个 值为空字符串的属性:
我们在 props 中声明 disabled 为 Boolean 类型:
重新打印结果:

以上两次打印得出第四条结论:props 支持 string 以外的类型,attrs 只有 string 类型

完整代码:
父组件




子组件




你可能感兴趣的:(Vue3组件传值之props与attrs的区别)