Компоненты Blade

Кнопка, карточка, сообщение об ошибке встречаются на сайте десятки раз. Компонент Blade превращает такой фрагмент в собственный тег: разметка описана в одном месте, а используется везде.

Создание компонента

Простому компоненту достаточно одного шаблона в папке resources/views/components:

{{-- resources/views/components/alert.blade.php --}}
<div class="alert">
    {{ $slot }}
</div>

Переменная $slot — это то, что написано между открывающим и закрывающим тегом компонента.

Использование

Тег компонента начинается с x-:

<x-alert>
    Статья сохранена.
</x-alert>

Компонент из подпапки вызывают через точку: файл components/forms/input.blade.php — это <x-forms.input />.

Атрибуты

Значения передают атрибутами. В шаблоне компонента их объявляют директивой @props — там же задают значения по умолчанию:

{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'title'])
 
<div class="alert alert-{{ $type }}">
    <strong>{{ $title }}</strong>
    {{ $slot }}
</div>

<x-alert type="error" title="Ошибка">
    Не удалось сохранить.
</x-alert>
 
<x-alert :title="$message" />

Двоеточие перед именем атрибута означает, что значение — выражение PHP, а не строка.

Остальные атрибуты

Атрибуты, которых нет в @props, попадают в переменную $attributes. Так компоненту можно передать класс или идентификатор:

{{-- resources/views/components/button.blade.php --}}
<button {{ $attributes->merge(['class' => 'btn', 'type' => 'button']) }}>
    {{ $slot }}
</button>

<x-button class="btn-primary" type="submit">Сохранить</x-button>

Классы объединятся: получится class="btn btn-primary".

Именованные слоты

Когда компоненту нужно несколько областей, используют именованные слоты:

{{-- resources/views/components/card.blade.php --}}
<div class="card">
    <div class="card-header">{{ $header }}</div>
    <div class="card-body">{{ $slot }}</div>
</div>

<x-card>
    <x-slot:header>Заголовок</x-slot:header>
 
    Содержимое карточки.
</x-card>

Макет на компонентах

Компонент может заменить макет с @extends:

{{-- resources/views/components/layout.blade.php --}}
<html>
<head>
    <title>{{ $title ?? 'Мой блог' }}</title>
</head>
<body>
    <main>{{ $slot }}</main>
</body>
</html>

<x-layout>
    <x-slot:title>Статьи</x-slot:title>
 
    <h1>Статьи</h1>
</x-layout>

Компонент с классом

Если компоненту нужна логика, его создают командой — появится класс и шаблон:

php artisan make:component Alert

Публичные свойства класса доступны в шаблоне как переменные.

Частая ошибка

Без двоеточия значение атрибута — всегда строка. Запись <x-alert title="$message" /> передаст буквально текст $message, а <x-post :post="$post" /> без двоеточия — строку вместо объекта. Для переменных и выражений ставьте двоеточие.