# 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](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) <a href="#id-1-khoi-tao-component--slot-creating-component--slot-5" id="id-1-khoi-tao-component--slot-creating-component--slot-5"></a>

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](http://localhost:8000/) ta sẽ được kết quả như hình:

![](https://images.viblo.asia/34166350-c024-4cbf-93ac-15555c0edf67.JPG)

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ị :)
