Vue组件传值props和attrs的区别

2,075 阅读1分钟

总的来说有4点区别

  1. 用props取值需要声明,用attrs不需要
  2. 在props中声明过的值不会再出现在attrs中
  3. props不包含事件,attrs包含
  4. props支持string以外的类型,attrs只支持string

来看一下得出结论的过程

首先在父组件里传入两个事件一个属性,在子组件里将prop和attrs分别打出来

父组件: image.png

子组件: image.png

打印结果:

image.png 可以看到props是一个空对象,attrs包含了传入的事件和属性。

此时在子组件里声明一下这个属性: image.png

打印结果发生了变化,声明的属性出现在了props里面,attrs里则不再包括这个属性: image.png 由此得到了两点结论,1:atrrs不需要声明就可以得到传的值,而props需要;2:props声明后得到的值不再出现在atrrs中。又由于props不能声明事件,所以得到第三个结论,attrs包含事件,props不包含。

最后,我们先在props里声明一个类型为Boolean的属性,打印出来看看:

image.png

image.png 打印结果属性值为false

取消props里的声明,在父组件里直接传入类型为Boolean的这个属性,

image.png image.png 打印结果属性为一个空字符串 所以得到结论四,attrs只支持String,props支出String以外的类型。