记一次vue的props引发的bug

159 阅读1分钟

记一次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,不符合预期

image.png

另外,$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使我强大 ┭┮﹏┭┮

码字不易,点赞鼓励!