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:

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