# 3. Truyền dữ liệu cho component (Passing data to component) (ok)

Đôi khi với một `$slot` thì bị hạn chế cho việc tùy chỉnh nội dung một component, chính vì thế Laravel cho phép truyền slot khác ngoài `$slot` mặc định để ứng dụng của bạn linh hoạt hơn.

```
@component('components.modal')
    @slot('title')
        Lỗi!
    @endslot

    Đã có lỗi xảy ra
@endcomponent
```

Sử dụng `@slot` với tham số là tên biến nhận dữ liệu trong blade view component để khai báo một giá trị khác mà component có thể nhận.

Tại component `modal`, bạn chỉnh sửa nội dung như sau:

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

Laravel sẽ hiểu phần nội dung bạn khai báo ở `@slot` sẽ truyền vào `$title`, còn phần chỉ nằm trong cặp thẻ `@component` thì sẽ truyền vào `$slot` mặc định. Mình xin tản mạn một chút, cú pháp `{{ $varible }}` là dùng để hiển thị dữ liệu của biến.

Và đây là kết quả sau khi tải lại trang:

![](https://images.viblo.asia/018fb917-0692-4d42-a024-58b609bec6aa.JPG)

Ngoài ra bạn có thể thay thế cách truyền dữ liệu cho component trên bằng cách:

```
@component('components.alert', ['title' => 'Lỗi!'])
    Đã có lỗi xảy ra
@endcomponent
```

Tham số thứ hai trong `()` sẽ nhận một mảng chứa dữ liệu và lấy tên key làm tên biến trong component. Với cách này thông thường dùng để truyền các dữ liệu ngắn, không chứa thẻ HTML.

> Từ khóa:@slot('title') dùng truyền dữ liệu một cách linh hoạt sang component

Ví dụ:

resources\views\child.blade.php

```
@extends('app')
@section('content')
    <h1>My content</h1>
    @component('components.modal')
      @slot('title')
        Lỗi!
    	@endslot
    @endcomponent
@endsection
```

resources\views\components\modal.blade.php

```
<div class="modal">
    {{ $title }}
</div>
```

## Ngoài ra bạn có thể thay thế cách truyền dữ liệu cho component trên bằng cách:

```
@component('components.alert', ['title' => 'Lỗi!'])
    Đã có lỗi xảy ra
@endcomponent
```
