Vue空字符串不是假值吗怎么经过props就变成了true

你定义了个组件

unhappy.vue

，在props中定义传入一个布尔值：

<template>
  <div>
    {{ active }}
  </div>
</template>

<script>
  export default {
    props: {
      active: {
        type: Boolean,
        default: false
      },
    },
  }
</script>

然后在

happy.vue

里调用它，但在这里

active

初始值是空字符串：

<template>
  <div>
    <Unhappy :active="active"></Unhappy>
  </div>
</template>

<script>
  import Unhappy from './unhappy.vue'

  export default {
    components: {
      Unhappy,
    },
    data() {
      return {
        active: ''
      }
    },
  }
</script>

我们知道在js里，空字符串是一个“假值”，它在布尔值上表现为false。

迄今为止，这两段代码看起来毫无问题——如果不看我标题的话，你甚至不会起疑心。但结果却让你以外，因为页面显示出了：

true

然后你一脸懵逼：“这里怎么会为true？”——这正是我在遇见这个情况的真实写照。

那么为什么呢？我扒出了vue的源码想一探究竟，然后参考了

leelxp

对源码的分析。发现了vue中，props从空字符串到false的真实情况：

export function validateProp(
  // 遍历propOptions时拿到的每个属性名。
  key: string,
  // 当前实例规范化后的props选项。
  propOptions: Object,
  // 父组件传入的真实props数据。
  propsData: Object,
  // 当前实例。
  vm?: Component
): any {
  // 当前key在propOptions中对应的值。
  const prop = propOptions[key]
  // 当前key是否在propsData中不存在，即父组件是否传入了该属性
  const absent = !hasOwn(propsData, key)
  // 当前key在propsData中对应的值，即父组件对于该属性传入的真实值。
  let value = propsData[key]
  // 如果prop.type定义的是Boolean类型则返回0
  const booleanIndex = getTypeIndex(Boolean, prop.type)
  // 0
  if (booleanIndex > -1) {
    if (absent && !hasOwn(prop, 'default')) {
      // 如果调用时没有传值，在规定props时没有定义默认值，则默认为false
      value = false
    } else if (value === '' || value === hyphenate(key)) {
      /*
        hyphenate：将驼峰形式转为连字符，比如——
        'UserName'.replace(/\B([A-Z])/g, '-$1').toLowerCase()
        结果为：'user-name'
      */
      // 如果prop.type定义的是String类型则返回0。实际定义的是Boolean。此处返回-1
      const stringIndex = getTypeIndex(String, prop.type)
      if (stringIndex < 0 || booleanIndex < stringIndex) {
        value = true
      }
    }
  }
  // ... 省略无关代码
  return value
}

这段代码在你定义props字段为

Boolean

类型，但传入

String

类型时，甚至可以简述为：

再简单点，子组件定义Boolean值，但传的值是空字符串时，输出

true