Laravel 8 组件通过HTML属性传值时出现Undefined Variable报错

故障复现步骤 #

• 执行命令生成Blade组件：php artisan make:component dummy
• 在生成的组件视图文件dummy.blade.php中写入测试代码：

{{-- random quote --}}
<div>
    {{ $title }}
</div>

• 在业务视图中按照常规语法调用组件并传值：

<x-dummy title="Some Title"></x-dummy>

• 页面渲染时抛出错误：

Undefined variable: title (View: .... )

初步排查结论 #

• 将组件视图中的{{ $title }}替换为静态文本时，组件可正常渲染
• 通过x-slot插槽方式传值，内容可正常显示
• 按照Laravel 8官方文档说明，HTML属性传值是Blade组件的原生支持能力，因此无法定位报错根源

问题根本原因 #

报错核心是混淆了Laravel Blade的两类组件实现逻辑：

• 第一类是类组件：通过php artisan make:component命令创建组件时，会同步在app/View/Components目录生成对应的PHP组件类，这类组件的视图变量需要在PHP类中通过公共属性、构造函数或render方法显式声明并传递，不会自动将调用时传入的HTML属性绑定为视图变量
• 第二类是匿名组件：不需要配套的PHP类，仅需在/resources/views/components目录下创建对应的blade文件即可使用，这类组件会自动将调用时传入的HTML属性映射为视图内可直接访问的变量，非常适合按钮、表单这类无数据库交互、无复杂业务逻辑的静态UI组件

该场景的实际问题是：本意是创建匿名组件，却错误使用了类组件的生成命令，导致生成的组件挂载了配套PHP类，传入的title属性没有被类显式声明传递，最终触发视图未定义变量的错误。

解决方案 #

根据实际使用场景二选一即可：

• 若需要使用类组件：打开app/View/Components/Dummy.php文件，为组件类添加与传入属性同名的公共属性，框架会自动将调用时传入的对应属性值赋值给该公共属性，即可在组件视图中正常访问$title变量
• 若需要使用匿名组件：直接删除app/View/Components/Dummy.php对应的PHP类文件，仅保留resources/views/components/dummy.blade.php视图文件，后续调用组件时传入的HTML属性会自动映射为视图变量，即可正常渲染

内容的提问来源于stack exchange，提问作者luisfer