Laravel Components (組件)

什麼是 Component？

Component 是一種可重複使用的 UI 元件，可用於組成應用程式的介面，例如輸入框、按鈕、表格、表單、警示框、分頁器，甚至是自訂的元件。
它們可以獨立開發、測試、維護，並能在各處重複使用，提高可讀性與可維護性。
Blade Component 支援屬性傳遞、插槽（slot）、繼承與命名空間等機制。

建立 Component

使用 Artisan 指令建立 Component：

# 建立一個名為 MyComponent 的 Component，產生 PHP 類別與 Blade 檔案
php artisan make:component MyComponent

# 建立子目錄中的 Component（例如：Document/MyComponent）
php artisan make:component Document/MyComponent

預設會產生以下兩個檔案：

  • app/View/Components/MyComponent.php：元件邏輯
  • resources/views/components/my-component.blade.php：元件視圖模板

定義 Component 類別內容

namespace App\View\Components;

use Illuminate\View\Component;

class MyComponent extends Component
{
    public $name;

    public function __construct($name)
    {
        $this->name = $name;
    }

    public function render()
    {
        return view('components.my-component');
    }
}

這個 Component 接收一個 $name 參數，並指定使用 components.my-component 作為視圖模板。

定義 Blade 模板內容

{{-- resources/views/components/my-component.blade.php --}}
<div>
    Hello, {{ $name }}!
</div>

使用 Component

在任何 Blade 模板中使用 x- 標記語法：

<x-my-component name="John" />

渲染後的 HTML：

<div>
    Hello, John!
</div>

傳遞多個參數

// app/View/Components/Panel.php
namespace App\View\Components;

use Illuminate\View\Component;

class Panel extends Component
{
    public $title;
    public $content;

    public function __construct($title, $content)
    {
        $this->title = $title;
        $this->content = $content;
    }

    public function render()
    {
        return view('components.panel');
    }
}

{{-- resources/views/components/panel.blade.php --}}
<div class="panel">
    <h2>{{ $title }}</h2>
    <p>{{ $content }}</p>
</div>

{{-- 使用方式 --}}
<x-panel title="My Title" content="My Content" />

Blade 屬性命名規則

  • PHP 中使用駝峰式命名：$myName
  • Blade 使用時需轉為短橫式命名：my-name
<x-name my-name="jack" />

public function __construct($myName)
{
    $this->myName = $myName;
}

插槽（Slot）

插槽是一種在組件中定義可變內容區域的方式。

預設插槽（$slot）

{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

{{-- 使用 --}}
<x-alert type="danger">
    This is an error message.
</x-alert>

<div class="alert alert-danger">
    This is an error message.
</div>

具名插槽

{{-- resources/views/components/card.blade.php --}}
<div class="card">
    <div class="card-header">
        {{ $header }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
    <div class="card-footer">
        {{ $footer }}
    </div>
</div>

{{-- 使用具名插槽 --}}
<x-card>
    <x-slot name="header">
        Card Header
    </x-slot>

    Main content goes here.

    <x-slot name="footer">
        Card Footer
    </x-slot>
</x-card>

小提醒

  • 所有 Blade Component 都應放置於 app/View/Components 與 resources/views/components 中。
  • 若有需要多層資料夾或命名空間，Blade 檔案會自動依照子路徑命名，例如 x-document.my-component。
  • render() 方法可回傳 Blade 檢視或 Illuminate\View\View|string。

延伸閱讀