Bài 6: Component và Slot trong Blade (Hiện đại & Mạnh mẽ)

Chào bạn đến với Bài 6! Nếu như ở Bài 5 chúng ta đã làm quen với @include, thì sang Bài 6 này, chúng ta sẽ khám phá Blade Components – phiên bản nâng cấp, hiện đại và mạnh mẽ hơn rất nhiều. Các framework lớn như React hay Vue đều dùng khái niệm "Component", và Laravel cũng mang mô hình này vào Blade.

1. Component là gì? Khác gì với @include?

• @include: Giống như việc "copy-paste" một đoạn mã vào vị trí gọi nó. Nó vẫn phụ thuộc nhiều vào các biến bên ngoài môi trường hiện tại.

• Component: Là một khối giao diện độc lập (đóng gói), có thể nhận các thuộc tính (attributes), xử lý logic riêng (thông qua Class PHP) và nhận nội dung truyền vào linh hoạt qua Slot.

2. Component ẩn danh (Anonymous Components) - Nhanh gọn và phổ biến

Khi bạn chỉ cần tái sử dụng một khối giao diện đơn giản (như nút bấm, thẻ card, ô thông báo) mà không cần viết thêm logic phức tạp trong PHP, bạn chỉ cần tạo một file Blade bình thường bên trong thư mục resources/views/components/.

Ví dụ: Tạo file resources/views/components/card.blade.php

HTML

<div class="card border rounded shadow-sm p-3 mb-3">
    <!-- Tiêu đề card -->
    <div class="card-header font-weight-bold">
        {{ $title }}
    </div>
    
    <!-- Nội dung chính của card (Slot mặc định) -->
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Cách gọi component này ở trang khác: Thay vì dùng @include, bạn gọi bằng cú pháp thẻ HTML <x-tên-component />:

HTML

<x-card>
    <x-slot name="title">
        Thông báo hệ thống
    </x-slot>

    <p>Hôm nay là một ngày tuyệt vời để học Laravel!</p>
    <button class="btn btn-primary">Xác nhận</button>
</x-card>

• Tên component card được gọi bằng thẻ <x-card>. Nếu file nằm trong thư mục con (ví dụ: components/forms/input.blade.php), bạn gọi bằng <x-forms.input />.

• Các phần nội dung bọc bên trong thẻ component sẽ tự động được gán vào biến $slot.

• Các phần dùng thẻ <x-slot name="title"> được gọi là Named Slots (Slot có tên), giúp bạn đổ dữ liệu vào nhiều vị trí khác nhau trong component.

3. Truyền biến (Attributes) vào Component

Bạn có thể truyền các biến (thuộc tính) vào component giống như truyền thuộc tính cho thẻ HTML thông thường:

• Tại file component (resources/views/components/alert.blade.php):

  HTML

  <div class="alert alert-{{ $type ?? 'info' }}">
      {{ $slot }}
  </div>
  
  

• Khi sử dụng:

  HTML

  <x-alert type="danger">
      Cảnh báo! Mật khẩu của bạn quá yếu.
  </x-alert>
  
  

4. Component có kèm Class PHP (Class-based Components)

Nếu component của bạn cần xử lý logic phức tạp trước khi hiển thị giao diện (ví dụ: truy vấn CSDL lấy danh sách danh mục để hiện lên sidebar), bạn có thể dùng lệnh Artisan để tạo:

Bash

php artisan make:component Alert

Lệnh này sẽ tạo ra 2 file:

1. Class PHP (app/View/Components/Alert.php): Nơi bạn viết logic xử lý, nhận dữ liệu qua hàm __construct.

2. View Blade (resources/views/components/alert.blade.php): Nơi hiển thị giao diện.

Tuyệt vời! Bạn đã hoàn thành toàn bộ Phần 2 (Layout & Kế thừa). Kỹ năng dùng Component và Slot sẽ giúp bạn xây dựng các ứng dụng Laravel có giao diện chuẩn chỉnh và dễ bảo trì như các lập trình viên chuyên nghiệp.

Bây giờ chúng ta sẽ bước sang Phần 3: Nâng cao và Mở rộng (Advanced Blade) với Bài 7: Stack và Push dữ liệu (Quản lý CSS/JS linh hoạt). Bạn đã sẵn sàng chưa?