Merge attributes blade components trong Laravel Chuyên mục PHP và Laravel 2023-08-02 961 Lượt xem 18 Lượt thích 0 Bình luận
Các component tags Blade là một bổ sung hữu ích cho phiên bản mới nhất của Laravel, tức là phiên bản 7. Trong Laravel 7, các component Blade đã được đại tu để cho phép hiển thị dựa trên rendering, attribute management, component classes, inline view...
Vì vậy, chẳng hạn:
<!-- /resources/views/components/alert.blade.php -->
<div class="alert">
{{ $slot }}
</div>Sau đó, component có thể được hiển thị trong Blade view khác bằng cách sử dụng component’s tag như này.
<x-alert>
Default slot content...
</x-alert>Ở đây, mọi thứ giữa thẻ <x-alert> được định vị ở dạng biến $slot trong alert.blade.php.
Bây giờ, hãy lấy trường hợp sau đây khi bạn cũng chuyển một lớp class="mb-4" cho component tag.
<x-alert class="mb-4">
Default slot content...
</x-alert>Bạn có thể mong đợi rằng lớp “mb-4” sẽ được hợp nhất với “alert” và kết quả sẽ giống như vậy.
<div class="alert mb-4">
{{ $slot }}
</div>Nhưng đó không phải là kết quả mong đợi mà bạn nhận được. Đó là nơi thuộc tính $attributes cho component Blade phát huy tác dụng.
$attributes property
Về cơ bản, $attribute mang tất cả các thuộc tính được truyền vào các thẻ component. Vì vậy, hãy lấy ví dụ trên làm ví dụ bằng cách thêm $attributes vào đó.
<!-- /resources/views/components/alert.blade.php -->
<div class="alert" {{ $attributes }}>
{{ $slot }}
</div>Vì vậy, nếu chuyển một class khác vào thẻ như này.
<x-alert class="mb-4">
Default slot content...
</x-alert>Kết quả sẽ là,
<!-- /resources/views/components/alert.blade.php -->
<div class="alert" class="mb-4">
{{ $slot }}
</div>Như bạn có thể thấy, class không hợp nhất. Thay vào đó, Laravel đã cố gắng tạo thuộc tính class của riêng nó. Vì vậy, để hợp nhất các giá trị bổ sung cho các thuộc tính, bạn sẽ sử dụng phương thức merge() trên các $attributes như này.
<!-- /resources/views/components/alert.blade.php -->
<div {{ $attributes->merge(['class' => 'alert']) }}>
{{ $slot }}
</div>bây giờ bạn sẽ nhận được kết quả mong muốn. tức là một blade component có cả giá trị alert và mb-4 được hợp nhất với nhau trong thuộc tính class.
Bình luận (0)