vue 中 boolean props 的默认值问题
source link: https://blog.rxliuli.com/p/f3564b039a28421188146aa89b52a3c0/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
vue 中 boolean props 的默认值问题
本文最后更新于:2023年7月11日 晚上
最近组内其他人基于 antdv 封装了一些组件,其中一些 boolean 类型的 props 被透传到了 antdv 的组件。但实际使用时发现,当不传递这些 boolean props 时,antdv 组件的行为和预期不一致。
<script lang="ts" setup>
withDefaults(
defineProps<{
flag?: boolean
}>(),
{
flag: true,
},
)
</script>
<template>
<div>
{{ String($props.flag ?? 'undefined') }}
</div>
</template>
<script lang="ts" setup>
import A from './A.vue'
defineProps<{
flag?: boolean
}>()
</script>
<template>
<A v-bind="$props"></A>
</template>
<script setup>
import A from './A.vue'
import B from './B.vue'
</script>
<template>
<A></A>
<B></B>
</template>
true
false
是不是感觉很神奇,组件 B 明明将所有的 props 都透传给了组件 A,但却渲染出来了不同的结果。在组件 B 中打印一下 props.flag
的值,发现是 false
,这就是实际的问题了。
好吧,目前的解决方法是将所有的 boolean 值的默认值都强制指定为 undefined,例如
<script lang="ts" setup>
withDefaults(
defineProps<{
flag?: boolean
}>(),
{
flag: undefined,
},
)
</script>
这样就可以得到预期的结果了。
true
true
- 在 vue 的官方文档中找到了这个行为的定义,ref: Boolean 类型转换
- 检查了一下 vue issues,发现这是一个自 2017 年以来就不断有人提出的问题,看起来已经是一个历史遗留问题了,ref: https://github.com/vuejs/vue/issues/4792
- 有一个 pr 正在尝试改变这个行为,ref: https://github.com/vuejs/core/pull/8602 – 吾辈错了,它只是修复 withDefaults 显式指定 undefined 时 props 的类型问题,默认情况下还是不符合预期,yyx 回复说为了兼容无法改变,ref: https://github.com/vuejs/core/issues/8576#issuecomment-1630583143
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK