@props 默认值仅在属性完全未传递时生效,传空字符串、null 等 falsy 值仍会覆盖默认值;应使用 {{ $title ?: 'Default' }} 或构造函数兜底处理。

当使用 @props 声明组件属性并设默认值(如 @props(['title' => 'Default'])),却在调用时传空字符串、null 或未传值,但默认值仍不生效——这通常不是 Blade 本身的问题,而是属性绑定机制和 PHP 类型判断逻辑导致的“看似失效”。核心在于:Laravel 不会自动跳过 falsy 值去回退默认值;它只在**属性完全未传递**时才启用默认值。
为什么传空值(如 title="")会导致默认值不触发
Blade 组件接收到 title="" 后,会把空字符串作为实际值传入组件类的构造函数或 @props 数组,此时 $title 已被赋值为 "",不再是“未定义”状态,因此默认值不会覆盖。
-
<x-card title=""></x-card>→$title = ""(显式传了空字符串) -
<x-card></x-card>→$title = 'Default'(未传,走默认值) -
<x-card :title="null"></x-card>→$title = null(显式传了 null,不触发默认)
修复方案:在组件内做兜底判断
不要依赖 @props 默认值处理空值场景,而应在视图中主动 fallback。推荐以下两种写法:
- 用空合并运算符:
{{ $title ?? 'Default' }}—— 仅对null有效 - 用空字符串判断:
{{ $title ?: 'Default' }}—— 对null、''、false、0都生效(更常用) - 需要更严格控制?在组件类构造函数中处理:
public function __construct(public string $title = 'Default') {
$this->title = $title ?: 'Default';
}
布尔属性要特别注意:别传字符串 "false"
像 show-icon="false" 这种写法,Blade 会把它当作字符串 "false"(truthy),而非布尔 false。结果是 $showIcon = "false",导致 ?: 判断失败。
- ✅ 正确传布尔:
<x-button :show-icon="false"></x-button>(加冒号,值为字面量) - ✅ 或用属性简写:
<x-button show-icon></x-button>(等价于:show-icon="true") - ❌ 错误:
<x-button show-icon="false"></x-button>(无冒号 → 字符串)
进阶建议:统一用 @props 收集 + 手动解构
若组件需处理大量可选属性,且常有空值/缺失混用,推荐这种健壮写法:
- 在组件顶部写:
@props(['title' => '', 'desc' => '', 'disabled' => false]) - 然后在模板中统一 fallback:
{{ $title ?: 'Untitled' }}、{{ $desc ?: 'No description' }} - 布尔值直接用于条件:
@if($disabled) disabled @endif(因已设默认false,安全)


















