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

当Vue组件的props定义为布尔类型,但接收到空字符串时,props会解析为true。这是因为Vue在处理props时,如果定义为Boolean类型且接收到的是空字符串,会将其视为true。这一行为在JavaScript中不符合常规的布尔转换规则,导致可能的误解。文章通过源码分析解释了这一现象。
摘要由CSDN通过智能技术生成

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
}

这段代码的关键点在于:

const stringIndex = getTypeIndex(String, prop.type)
// stringIndex  = -1
if (stringIndex < 0) value = true
// -1 < 0

它在你定义props字段为Boolean类型,但传入String类型时,甚至可以简述为:

prop定义的类型是Boolean类型
调用时有传值
值为空字符串
prop定义的类型不为String类型
输出true

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值