记一次vue的props引发的bug
背景
为一个公共组件加2个props属性,控制video静音和自动播放,结果让其他地方本来应该静音自动播放的video,变得不自动播放了
muted: { // 静音
type: Boolean,
},
autoplay: { // 自动播放
type: Boolean,
},
分析原因
本来预期是不传muted和autoplay,在video组件内,会用自己定义的默认值true。
结果:不传muted和autoplay,muted和autoplay都变成了false,导致自动播放失效了,影响到了其他公共组件
props出bug了吗?产生了怀疑,于是好好写最小case研究一波
根本原因
vue把type是Boolean的值,默认变成了false。正常不传的话 应该是undefined,这里是个坑
比如:
// 父组件
<HelloWorld />
// 子组件
<template>
<div class="hello">
{{aa}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
bool: Boolean,
},
computed: {
aa () {
console.log(this.bool)
console.log(this.$props)
return {
...this.$props
}
}
}
}
</script>
预期应该都是undefined,因为父组件没有传props。 打印结果:bool被强制改成了false,不符合预期
另外,$attrs
和 $props
的区别
console.log(this.$props) // 如果当前组件没写props,那么这个值是空{}。 props没有声明的属性,此处拿不到,下面的$attrs能拿到
console.log(this.$attrs) // !!只能拿到props没有声明的属性。 props声明了的属性,$attrs是拿不到的
// 举个栗子
比如有子组件 <HelloWorld qwer="1"/> HelloWorld这个子组件内,
没有声明qwer这个props属性,如果想要拿到qwer这个值,
就只能用 this.$attrs.qwer 拿到了, this.$props拿不到
bug使我强大 ┭┮﹏┭┮
码字不易,点赞鼓励!