Bài 10: Blade Service Injection và Anonymous Components Nâng cao

Chào mừng bạn đến với Bài 10 – bài học cuối cùng trong chuỗi series về Blade Template Engine! Ở bài học này, chúng ta sẽ khám phá hai tính năng cực kỳ mạnh mẽ giúp tối ưu hóa việc lấy dữ liệu và xây dựng Component chuyên nghiệp hơn.

1. Blade Service Injection (@inject)

Thông thường, dữ liệu được truyền từ Controller sang View. Tuy nhiên, có những thành phần hiển thị ở mọi trang (như Menu danh mục sản phẩm, Giỏ hàng ở Header, hoặc Thống kê nhanh ở Footer) mà nếu cứ phải truyền qua mọi Controller thì rất mất thời gian.

Chỉ thị @inject cho phép bạn gọi trực tiếp một Service hoặc một Class từ Laravel Service Container ngay trong file Blade:

HTML

<!-- Gọi StatService trực tiếp trong View mà không cần Controller truyền sang -->
@inject('stats', 'App\Services\StatisticService')

<div class="footer-stats">
    <p>Tổng số thành viên: {{ $stats->getTotalUsers() }}</p>
    <p>Bài viết đang hoạt động: {{ $stats->getActivePostsCount() }}</p>
</div>

• Tham số thứ nhất: Tên biến đại diện bạn muốn đặt ($stats).

• Tham số thứ hai: Tên class hoặc service đầy đủ không gian tên (namespace).

2. Nâng cấp Anonymous Components với @props và Attribute Bag

Ở Bài 6 chúng ta đã làm quen với Component ẩn danh. Để component linh hoạt và chuyên nghiệp hơn, Blade hỗ trợ hai khái niệm cốt lõi:

• @props (Khai báo thuộc tính): Giúp bạn định nghĩa trước các biến nhận vào và gán giá trị mặc định nếu cần.

  HTML

  <!-- resources/views/components/button.blade.php -->
  @props(['type' => 'primary', 'text' => 'Bấm vào đây'])
  
  <button {{ $attributes->merge(['class' => "btn btn-$type"]) }}>
      {{ $text }}
  </button>
  
  

• $attributes (Gộp thuộc tính linh hoạt): Giúp tự động gộp các class, id, hoặc sự kiện HTML bên ngoài truyền vào component mà không bị mất đi.

  HTML

  <!-- Khi sử dụng ở trang khác -->
  <x-button type="success" text="Lưu thay đổi" class="mt-3 shadow" />
  
  

  Kết quả render sẽ tự động kết hợp class mặc định của component với class mt-3 shadow mà bạn truyền vào bên ngoài.

🎉 Chúc mừng bạn đã hoàn thành xuất sắc toàn bộ Series Blade Template Engine trong Laravel!

Từ cú pháp cơ bản, cấu trúc điều kiện, vòng lặp, kế thừa layout, đến Component hiện đại và Custom Directives – giờ đây bạn đã hoàn toàn tự tin làm chủ giao diện trong Laravel.

Bạn cảm thấy tâm đắc nhất với tính năng nào của Blade trong suốt chuỗi bài học vừa rồi?