Laravel Blade组件传参失败原因及解决方法

Laravel Blade 组件中属性值前后若存在空格（如 `name = "Joanna"`），会导致参数无法正确绑定，组件内 `$name` 变量为 `null`，从而页面无内容渲染。

在 Laravel 中，自定义 Blade 组件（如 <x-header />）的属性解析依赖于严格的 HTML 属性语法。你遇到的问题——组件渲染后 <h1>Hi </h1> 空白显示——根本原因在于 属性声明中错误地添加了空格：

<!-- ❌ 错误：等号两侧有空格 -->
<x-header name = "Joanna"/>

Blade 解析器会将 name = "Joanna" 视为无效属性语法，导致 name 参数未被传递到 Header 组件构造函数中，$this->name 保持未初始化状态（即 null），最终视图中 {{ $name }} 渲染为空。

✅ 正确写法必须遵循标准 HTML 属性格式（无空格）：

<!-- ✅ 正确：等号紧邻，无多余空格 -->
<x-header name="Joanna" />

此外，为确保组件健壮性，建议补充以下最佳实践：

• 在组件构造函数中设置默认值或类型约束（可选但推荐）：

  public function __construct(public string $name = 'Guest') {}

  这样即使传参遗漏，也不会报错且有兜底显示。

• 验证组件是否被正确注册（Laravel 8+ 默认自动发现，但若自定义路径需检查 composer.json 的 "autoload": {"psr-4": {...}} 是否包含 App\\View\\Components\\）。

• 调试技巧：可在 render() 方法中临时加入日志或 dd($this->name) 确认参数接收情况（上线前务必移除）。

最后，确认 resources/views/components/header.blade.php 路径准确无误，且文件名与组件类名（Header）对应（Laravel 不区分大小写但推荐驼峰匹配）。修复空格后刷新页面，即可看到预期输出：<h1>Hi Joanna</h1>。