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

Laravel中如何使用视图组件Component_Laravel Blade组件创建与调用【教程】 第1张

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），对应调用时的标签名小写加短横线（）
  • 构造函数参数会自动绑定为 public 属性，并可在视图中直接访问（如 $type）
  • 若需传递 slot 内容，视图中用 {{ $slot }} 渲染；若需命名 slot，用 {{ $header }} + ...

如何在 Blade 中正确调用组件

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

基础调用示例：


    操作失败，请重试。

带命名 slot 的调用：


    
        
详情

    
    
姓名：张三

注意：

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

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

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

错误写法：

public function render()
{
    return '
'.$this->message.'
';
}

正确写法：

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)
{
    //
}

但要注意：

  • 每次组件渲染都会触发一次 Request 解析，高频组件可能影响性能
  • 不要在 __construct 中做 DB 查询或耗时操作；逻辑尽量放在 render() 中，且考虑缓存
  • 若只是读取当前用户，Auth::user() 可以用，但别在构造函数里调，改在 render() 或视图中用

组件的边界感容易模糊——它该专注 UI 呈现，而非业务逻辑。把判断逻辑塞进组件类，很快会让 Alert.php 变成难以测试和复用的胶水代码。