Named slots Blade components trong Laravel Chuyên mục PHP và Laravel 2023-08-02 856 Lượt xem 61 Lượt thích 0 Bình luận
Các components Blade mới trong Laravel 7 rất tuyệt. Chúng cung cấp một cách dễ dàng để xác định các blade components trong thẻ aliases ( bí danh ) giống như Vue. Một trong những tính năng hay của các components Blade được gọi là slots.
Về cơ bản, slot cho phép bạn làm là đưa nội dung động vào blade component. Chẳng hạn, nếu chúng ta có sidebar component…
<!-- /resources/views/components/sidebar.blade.php -->
<div class="collapse list-unstyled">
<!-- want to fill in dynmic content here -->
</div>Và chúng ta muốn thêm một số nội dung động bên trong <div>, chúng ta có thể làm được điều này bằng cách sử dụng các slots như sau:
<!-- /resources/views/components/sidebar.blade.php -->
<div class="collapse list-unstyled">
{{ $slot }}
</div>Và bây giờ, chúng ta có thể truyền nội dung vào slot bằng cách đưa nội dung vào thành phần như này.
<x-sidebar>
<ul>
<li>Home</li>
<li>Articles</li>
<li>About</li>
</ul>
</x-sidebar>Tất cả nội dung bên trong các thẻ <x-sidebar> sẽ được slotted trong biến $slot của component mà nó được sử dụng.
Bây giờ, nếu chúng ta muốn sử dụng nhiều slots bên trong component thì sao? Chúng ta có thể làm điều này bằng cách sử dụng các “Named” slots. Và có vẻ như nguồn cảm hứng được lấy từ khái niệm tương tự trong Vue.js.
Named Slots
Về cơ bản, nếu bạn muốn sử dụng nhiều slots bên trong một component, bạn có thể sử dụng thẻ <x-slot> và chuyển thuộc tính name cho nó. Chẳng hạn, trong ví dụ trước của chúng ta, nếu chúng ta muốn chèn hình đại diện người dùng vào component, chúng ta có thể thêm thẻ <x-slot> với thuộc tính name="avatar" như này.
<x-sidebar>
<x-slot name="avatar">
<img src="/image/user-avatar.png" />
</x-slot>
<ul>
<li>Home</li>
<li>Articles</li>
<li>About</li>
</ul>
</x-sidebar>…Có thể bổ sung thêm trong component biến $avatar như này.
<!-- /resources/views/components/sidebar.blade.php -->
<div>
{{ $avatar }}
</div>
<div class="collapse list-unstyled">
{{ $slot }}
</div>Bằng cách này, bạn có thể thêm nhiều slots vào component của mình, điều này có thể hữu ích trong một số trường hợp nhất định như trường hợp mình đã mô tả ở trên.
Dynamic Slot Names
Giờ đây, ngoài việc khai báo slot có tên cố định, bạn cũng có thể đặt tên cho slots dynamic. Đối với điều này, tất cả những gì bạn cần làm là thêm tiền tố : trước thuộc tính name và chuyển vào dynamic varibale như này.
<x-slot :name="$avatar">
<img src="/image/user-avatar.png" />
</x-slot>Ở đây, $avatar sẽ là một biến chứa một chuỗi đóng vai trò là tên của slot.
Bình luận (0)