Đặt giá trị mặc định cho attributes trong các components sử dụng @props directive trong Laravel Chuyên mục PHP và Laravel 2023-08-02 858 Lượt xem 16 Lượt thích 0 Bình luận
Như mình đã mô tả trong bài viết này về cách bạn có thể tạo các components ẩn danh trong Laravel, chúng ta có thể tạo một component <x-alert> với nội dung sau.
<!-- /resources/views/components/alert.blade.php -->
<div class="alert">
{{ $slot }}
</div>Cái nào 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>Bây giờ, chúng ta có thể pass các thuộc tính bổ sung cho component sẽ có sẵn có trong component template.. Chẳng hạn, nếu chúng ta chuyển một thuộc tính type cho component như này.
<x-alert type="success">
Default slot content...
</x-alert>Thuộc tính type này có thể được sử dụng trong component template như này.
<div class="{{ $type == 'success' ? 'class-green' : 'class-red' }}">
{{ $slot }}
</div>Nhưng đôi khi, bạn chỉ muốn giữ một giá trị mặc định cho thuộc tính bất kể chuyển nó xuống từ component nào. Vì vậy, nếu chúng ta không cung cấp bất kỳ thuộc tính type nào như vậy, trong ví dụ trước…
<x-alert>
Default slot content...
</x-alert>Nó vẫn hoạt động. May mắn thay, Laravel cũng có giải pháp cho vấn đề này. Nhập @props directive.
The @props directive
@props directive có thể được sử dụng để chỉ định giá trị mặc định cho các thuộc tính ở đầu component’s Blade template. Vì vậy, nếu chúng ta muốn đặt giá trị mặc định của thuộc tính type success, chúng ta có thể làm như sau.
@props([
'type' => 'success'
])
<div class="{{ $type == 'success' ? 'class-green' : 'class-red' }}">
{{ $slot }}
</div>Bây giờ, khi chúng ta không chuyển thuộc tính type cho component <x-alert>, nó sẽ sử dụng giá trị mặc định của nó mà chúng ta đã đặt trong @props directive và ghi đè giá trị mặc định của nó khi chúng ta chuyển nó xuống từ component. Chẳng hạn, type="error" trong trường hợp của chúng ta như này.
<x-alert type="error">
Default slot content...
</x-alert>Giá trị của $type sẽ bị error trong trường hợp này.
Bình luận (0)