😅1. Khởi tạo component & slot (ok)

Cứ tưởng tượng là kéo một khối thiết kế sẵn html sang section :)

Một ví dụ về cách đặt tên cho slot và sử dụng biến https://c-i-ph-n-m-m-tr-n-ubuntu-c-n-thi.gitbook.io/learn-lavarel/1.1-create-sample-data-ok

1. Khởi tạo component & slot (Creating component & slot)

Bây giờ mình sẽ tạo component modal đặt trong file resources/views/components/modal.blade.php với nội dung sau:

<div class="modal">
    {{ $slot }}
</div>

Cú pháp {{ $slot }} sẽ chứa nội dung thông báo thay đổi liên tục trong suốt ứng dụng.

Lưu ý:: $slot không thể thay đổi tên biến khác.

Mọi thiết lập đã hoàn tất, giờ chỉ cần lấy ra sử dụng thôi. Mình sẽ sử dụng lại blade view child hồi nãy để test luôn.

@section('content')
    <h1>My content</h1>

    @component('components.modal')
        Đã có lỗi xảy ra
    @endcomponent
@endsection

Chúng ta sử dụng cặp thẻ @component ... @endcomponent để gọi component components.modal, đồng thời khai báo slot. Tham số trong () là tên blade view chứa component, nội dung trong cặp thẻ chính là giá trị mà $slot nhận được. Nạp lại server và chạy đường dẫn http://localhost:8000 ta sẽ được kết quả như hình:

Bạn có thể gọi một component nhiều lần như thế này:

@section('content')
    <h1>My content</h1>

    @component('components.modal')
        Đã có lỗi xảy ra
    @endcomponent

    @component('components.modal')
        Đã hết lỗi xảy ra
    @endcomponent
@endsection

@component('components.modal') có {{$slot}} để hiển thị :)