Boolean props未传值时为undefined而非false，default仅在完全未提供时生效；三种传值方式分别为存在即true、显式绑定false、不传则undefined。
Vue.js 中通过 props 传递 Boolean 类型数据时，其默认行为容易引发误解——不是“未传值即为 false”，而是“未传值时 props 属性根本不会被定义”，这直接影响 default 函数的触发时机和初始值逻辑。
Boolean props 的三种传值方式及实际表现
假设定义一个 prop：disabled: { type: Boolean }，它在模板中可能有以下写法：
-
true（存在即真，类似 HTML 原生布尔属性） -
false（显式绑定布尔值） -
disabled在组件内 为 undefined，不会自动 fallback 到false
default 函数只在 prop 完全未传时生效
要让未传 disabled 时取默认值，必须显式声明 default：
props: {
disabled: {
type: Boolean,
default: false // ✅ 这里才起作用
}
}
注意：default 是函数时（如 default: () => false），也仅在 prop 未被父组件提供（包括未写、未绑定、绑定为 null 或 undefined）时执行；若父组件写了 :disabled="undefined"，则 Vue 会把 undefined 当作传入值，default 不触发。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
常见误用：把 Boolean props 当作“开关”却忽略 undefined 状态
比如在组件内部这样判断：
computed: {
isDisabled() {
return this.disabled // ❌ 错误：this.disabled 可能是 undefined
}
}
更安全的写法是：
- 用
this.disabled ?? false（空值合并） - 或直接依赖
default配置确保始终有布尔值 - 或在 template 中用
v-if="disabled !== false"显式区分true/undefined
与非 Boolean props 的关键区别
String/Number 等类型 props 未传时也会是 undefined，但开发者通常更习惯主动设 default；而 Boolean 因 HTML 属性语法的“存在即 true”特性，容易让人误以为“不写就等于 false”。实际上 Vue 的 props 解析机制对所有类型一视同仁：是否设置 default，决定了未传时取什么值；是否存在属性名，决定了是否触发 Boolean 的 “true” 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
