Laravel中如何使用视图组件Component_Laravel Blade组件创建与调用【教程】-Laravel-PHP中文网

blade组件推荐使用类封装方式，通过php artisan make:component生成；调用时用语法，支持属性绑定和slot；render()方法须返回view()实例；避免在构造函数中执行耗时操作。

laravel中如何使用视图组件component_laravel blade组件创建与调用【教程】

Blade 组件不是“必须用类封装才能用”的东西，但用 class-based component 是 Laravel 推荐的、可复用性最强的方式。直接写 @component 或内联组件已不推荐，尤其在 Laravel 8+ 中。

如何定义一个 class-based Blade 组件

运行命令生成组件类和视图文件：

php artisan make:component Alert

这会创建：

app/View/Components/Alert.php
resources/views/components/alert.blade.php

关键点：

类名首字母大写（Alert），对应调用时的标签名小写加短横线（<x-alert></x-alert>）
构造函数参数会自动绑定为 public 属性，并可在视图中直接访问（如 $type）
若需传递 slot 内容，视图中用 {{ $slot }} 渲染；若需命名 slot，用 {{ $header }} + <x-slot name="header">...</x-slot>

如何在 Blade 中正确调用组件

不能用 @include 或 @component 模拟——Laravel 的 <x-></x-> 语法是独立解析机制，支持属性绑定、slot、动态名称等特性。

基础调用示例：

<x-alert type="error">
    操作失败，请重试。
</x-alert>

带命名 slot 的调用：

<x-card title="用户信息"><x-slot name="header"><h3 class="text-lg">详情</h3>
    </x-slot><p>姓名：张三</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
														src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
													<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</x-card>

注意：

属性值默认是字符串，加冒号前缀（:type）才启用 PHP 表达式绑定
组件名不支持变量拼接，即 <x-></x-> 会报错
如果组件不在 components/ 目录下，需在 AppServiceProvider::boot() 中用 Blade::component() 手动注册

为什么 `Alert.php` 的 render() 方法返回字符串会失效

从 Laravel 9 开始，render() 方法必须返回 view() 实例（或 Illuminate\Contracts\Support\Renderable），不能返回原始 HTML 字符串。否则组件内容不会被渲染，甚至静默失败。

错误写法：

public function render()
{
    return '<div class="alert">'.$this->message.'</div>';
}

正确写法：

public function render()
{
    return view('components.alert', [
        'message' => $this->message,
    ]);
}

或者更简洁地（利用隐式视图发现）：

public function render()
{
    return view();
}

组件中访问请求、认证等全局数据要小心

组件类不是控制器，没有自动注入 Request 或 Auth。若需要，应显式依赖注入：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

public function __construct(public string $type, private Request $request)
{
    //
}

但要注意：