根本原因是laravel默认仅扫描resources/views/components/目录且不递归子目录；若组件位于resources/views/components/ui/modal.blade.php，则无法被发现，必须将文件移至根components目录或在appserviceprovider中显式注册blade::component('components.ui.modal', 'modal')。
为什么直接报“Component not found”
根本原因就一个：Laravel 默认只扫描 resources/views/components/ 目录下的文件，且不递归子目录。如果你把 modal 组件放在 resources/views/components/ui/modal.blade.php，直接写 ui/ 这层目录找。
解决方式只有两个：
- 把文件挪到
resources/views/components/modal.blade.php（推荐新手） - 或在
AppServiceProvider::boot()里显式注册：Blade::component('components.ui.modal', 'modal');
别信“自动发现会扫子目录”，那是错觉；也别用下划线命名（my_modal.blade.php →
如何让 Modal 支持动态标题、内容和按钮
用 class-based 组件（php artisan make:component Modal）最稳妥，因为能显式声明 props 并做类型约束。
比如你希望这样用：
<x-modal title="确认删除" confirm-text="确定"> 确认要永久删除这条记录吗？ </x-modal>
就得在 Modal.php 构造函数里接收参数：
public function __construct(
public string $title = '',
public string $confirmText = '确认',
public string $cancelText = '取消'
) {}
然后在 resources/views/components/modal.blade.php 里用：
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ $title }}</h5>
</div>
<div class="modal-body">
{{ $slot }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">{{ $cancelText }}</button>
<button type="button" class="btn btn-primary">{{ $confirmText }}</button>
</div>
</div>
</div>
</div>
注意：$slot 是 HtmlString 对象，不能用 empty($slot) 判空，要用 trim($slot->toHtml()) !== '' 或直接 {{ $slot }} 渲染。
怎么安全传递 HTML 内容或动态属性
Modal 的根元素（比如 <div class="modal fade">）经常需要额外 class、id、data-* 属性，但 <code>$attributes 不会自动合并 class，必须手动拼接：
<div class="modal fade {{ $attributes->get('class', '') }}">except('class') }}><p>常见错误有：</p>
<ul>
<li>漏掉 <code>except('class')</code> → class 属性重复出现在标签上</li>
<li>直接写 <code>class="{{ $attributes }}"</code> → 输出对象字符串，页面崩</li>
<li>对 <code>$slot</code> 做 <code>json_encode()</code> 或 <code>str_replace()</code> → 可能引入 XSS，因为 <code>$slot->toHtml()</code> 已含原始 HTML</li>
</ul>
<p>如果要支持命名插槽（比如自定义 footer），得在模板里写 <code>{{ $footer ?? '' }}</code>，并在使用时配 <code><x-slot name="footer"></x-slot></code>；旧语法 <code>$slot->footer</code> 在 Laravel 9+ 已彻底失效。</p>
<h3>为什么不要用 <x-dynamic-component> 包裹 Modal</x-dynamic-component>
</h3>
<p><code><x-dynamic-component :component="$modalName"></x-dynamic-component></code> 看似灵活，实际埋了三个坑：</p>
<ul>
<li>类型推导失效：IDE 和 PHPStan 无法识别组件 props，写错参数也没提示</li>
<li>性能损耗：每次渲染都要查组件映射表，比静态标签慢 15%~20%</li>
<li>安全风险：若 <code>$modalName</code> 来自用户输入（如 URL 参数），可能被构造为恶意组件名，触发未预期的类加载</li>
</ul>
<p>真正需要“动态” Modal 的场景（比如根据状态切换 success/error 类型），应该用条件判断 + 多个固定组件，而不是靠 <code>x-dynamic-component</code> 调度。</p>
<p>Modal 组件最难的从来不是结构，而是 class 合并逻辑、slot 安全输出、以及子目录注册这种“看不见的约定”——这些地方一错，页面不报错但行为诡异，调试起来反而更耗时间。</p>
</div>
