Blade组件嵌套失效的根源是父组件未声明{{ $slot }},导致子内容被静默丢弃;必须在每层组件模板中显式输出{{ $slot }}才能透传嵌套内容,命名插槽还需确保变量名与x-slot名称严格匹配。

组件模板里漏了 {{ $slot }}
这是最常见、也最容易被忽略的错误。Laravel 不会自动透传内容,必须在组件视图文件(如 resources/views/components/card.blade.php)中显式写上 {{ $slot }},否则所有嵌套内容都会静默丢弃。
- ✅ 正确:组件内至少有一处
{{ $slot }}—— 它是默认插槽的唯一入口 - ❌ 错误:只写了
{{ $header }}或{{ $footer }},但没写{{ $slot }}→ 主体内容直接消失 - ⚠️ 注意:
@isset($slot){{ $slot }}@endisset是冗余写法,$slot总是存在(空时为 null),直接{{ $slot }}即可
x-slot 名字和组件内变量名不匹配
命名插槽不是“按语义自动映射”,而是严格按变量名字符串匹配。比如你在组件里用了 {{ $actions }},调用时就必须写 <x-slot name="actions"></x-slot>,拼错一个字母或用了横线(action-btn)都不行。
- 变量名自动转驼峰:组件中写
{{ $cardFooter }},对应插槽名是card-footer(不是cardFooter) - 不能混用旧语法:
@slot('header')在 Laravel 7+ 已废弃,只认<x-slot name="header"></x-slot> - 检查控制台是否报错
Undefined variable: actions—— 这说明名字对不上,而不是内容没传进去
父组件没透传,导致嵌套组件失效
当你把 <x-form></x-form> 套在 <x-layout></x-layout> 里却什么也不显示,问题往往不在 form 组件本身,而在 layout 组件没输出 {{ $slot }}。
- 每一层包装组件(
container、card、modal)都必须有{{ $slot }} - 如果某一层漏了,它下面所有子组件(包括其他
<x-xxx></x-xxx>)都会被截断,且无任何报错 - 验证方法:临时在父组件里加一句
DEBUG: {{ gettype($slot) }},看到object才说明内容已注入
默认插槽内容被当成纯文本渲染
如果你传入的是 Blade 代码(比如 <x-input></x-input> 或 @foreach),但页面只显示原始标签字符串,大概率是因为你用了 {{ $slot }} 而不是 {!! $slot !!} —— 但别急着改。
-
{{ $slot }}会自动转义 HTML,适合用户输入内容(防 XSS) -
{!! $slot !!}直接输出,仅限你完全信任插槽内容来源(如内部组件嵌套) - 更安全的做法:在组件定义时用
@props显式接收结构化数据,而非依赖插槽传复杂逻辑
真正卡住人的地方,往往不是语法记错,而是某一层组件默默吃掉了 $slot —— 它不报错、不提示,就只是什么都不渲染。逐层检查 {{ $slot }} 是否存在,比查文档更快。


















