Bài 5: Tái sử dụng mã nguồn với @include và Truyền biến

Chào bạn đến với Bài 5! Nếu như @extends (ở Bài 4) giúp bạn chia sẻ khung sườn lớn cho toàn trang, thì @include lại là công cụ đắc lực để bạn tách nhỏ các thành phần giao diện lặp đi lặp lại thành các file riêng biệt (thường gọi là partials), ví dụ như: thông báo lỗi, khung sản phẩm, form tìm kiếm, nút bấm phân trang...

1. Cú pháp cơ bản của @include

Giả sử bạn có một đoạn thông báo lỗi hoặc thành công muốn tái sử dụng ở nhiều trang. Bạn tạo file resources/views/components/alert.blade.php:

HTML

<div class="alert alert-danger">
    <strong>Lỗi!</strong> Đã có sự cố xảy ra.
</div>

Để nhúng (include) file này vào các trang khác, bạn chỉ cần dùng chỉ thị @include kèm theo đường dẫn tới file (tính từ thư mục resources/views/, dùng dấu chấm thay cho dấu gạch chéo thư mục):

HTML

@include('components.alert')

<!-- Nội dung trang khác tiếp tục ở đây -->
<p>Chào mừng bạn quay trở lại hệ thống.</p>

2. Truyền dữ liệu vào file được Include

Thông thường, các file partial cần hiển thị dữ liệu động tùy theo từng trang gọi nó. Blade cho phép bạn truyền một mảng dữ liệu làm tham số thứ hai cho @include:

• Tại file partial (resources/views/partials/user-card.blade.php):

  HTML

  <div class="user-card">
      <h3>{{ $name }}</h3>
      <p>Chức vụ: {{ $role }}</p>
  </div>
  
  

• Tại trang chính (Gọi và truyền biến):

  HTML

  @include('partials.user-card', ['name' => 'Nguyễn Văn A', 'role' => 'Admin'])
  @include('partials.user-card', ['name' => 'Trần Thị B', 'role' => 'Editor'])
  
  

💡 Mẹo nhỏ: File được include sẽ có quyền truy cập toàn bộ các biến đang có sẵn ở trang cha (parent view). Tuy nhiên, việc chủ động truyền dữ liệu qua mảng giúp file partial của bạn độc lập, rõ ràng và dễ tái sử dụng hơn rất nhiều.

3. Các biến thể thông minh của @include

Để xử lý các tình huống phức tạp mà không cần viết câu lệnh if rườm rà bên ngoài, Blade cung cấp các phiên bản mở rộng sau:

• @includeIf: Chỉ tiến hành nhúng file nếu file đó thực sự tồn tại. Tránh lỗi văng ứng dụng nếu lỡ gõ sai tên file.

  HTML

  @includeIf('partials.not-exists')
  
  

• @includeWhen: Chỉ nhúng file khi một điều kiện cho trước là true.

  HTML

  @includeWhen($isAdmin, 'partials.admin-menu')
  
  

• @includeFirst: Truyền vào một mảng các file, Blade sẽ tìm file nào tồn tại đầu tiên trong danh sách để render.

  HTML

  @includeFirst(['custom.profile', 'partials.default-profile'])
  
  

4. Tối ưu hóa vòng lặp với @each

Đôi khi bạn có một mảng dữ liệu và muốn dùng một file partial để hiển thị từng phần tử trong mảng đó. Thay vì viết vòng lặp @foreach rồi @include bên trong, bạn có thể dùng @each cực kỳ ngắn gọn:

HTML

<!-- Cú pháp: @each('tên_view', $mảng_dữ_liệu, 'tên_biến_đại_diện', 'tên_view_khi_mảng_rỗng') -->
@each('partials.user-item', $users, 'user', 'partials.no-users')

• Nó sẽ tự động lặp qua mảng $users, với mỗi vòng lặp gán giá trị cho biến $user và render file partials.user-item.blade.php.

• Nếu mảng $users rỗng, nó sẽ tự động render file partials.no-users.blade.php.

Tuyệt vời! Bạn đã nắm vững cách tái sử dụng mã nguồn với @include.

Chúng ta cùng bước sang Bài 6: Component và Slot trong Blade – một tính năng cực kỳ hiện đại và mạnh mẽ của Laravel nhé! Bạn đã sẵn sàng chưa?