总的来说有4点区别
- 用props取值需要声明,用attrs不需要
- 在props中声明过的值不会再出现在attrs中
- props不包含事件,attrs包含
- props支持string以外的类型,attrs只支持string
来看一下得出结论的过程
首先在父组件里传入两个事件一个属性,在子组件里将prop和attrs分别打出来
父组件:
子组件:
打印结果:
可以看到props是一个空对象,attrs包含了传入的事件和属性。
此时在子组件里声明一下这个属性:
打印结果发生了变化,声明的属性出现在了props里面,attrs里则不再包括这个属性:
由此得到了两点结论,1:atrrs不需要声明就可以得到传的值,而props需要;2:props声明后得到的值不再出现在atrrs中。又由于props不能声明事件,所以得到第三个结论,attrs包含事件,props不包含。
最后,我们先在props里声明一个类型为Boolean的属性,打印出来看看:
打印结果属性值为false
取消props里的声明,在父组件里直接传入类型为Boolean的这个属性,
打印结果属性为一个空字符串
所以得到结论四,attrs只支持String,props支出String以外的类型。