@component/@slot vs @include

Многие разработчики не видят разницы между методом @component и @include при работе с шаблонизатором Blade.

Рассмотрим каждый метод на примере простых задач и сделаем выводы - в каких ситуациях нужно использовать каждый из методов.

Ситуация №1. Вывод статичной информации

Есть файл copyright.blade.php, который содержит какой-то текст:

<div class="copyright">
    Roman Sarvarov © {{ now()->year }}
</div>

Решение с помощью @include

@include('copyright')

Решение с помощью @component

@component('copyright')
@endcomponent

В результате на экран будет выведено одно и тоже: Roman Sarvarov © 2020, однако, в данном случае, предпочтительнее будет использовать @include, так как не требуется передавать в вызываемый файл какие-то данные. @component в этом случае придется закрывать.

Ситуация №2. Вывод информации с переданной переменной

Есть файл alert.blade.php, в котором происходит вывод передаваемого через рассматриваемые методы сообщения.

Решение с помощью @include

<div class="alert alert-primary" role="alert">
    {!! $message !!}
</div>

@include('alert', ['message' => '<strong>Привет,</strong> мир!'])

Решение с помощью @component

<div class="alert alert-primary" role="alert">
    {!! $slot !!}
</div>

@component('alert')
    <strong>Привет,</strong> мир!
@endcomponent

Ситуация №3. Вывод информации с несколькими переменными

Как и в предыдущем примере, имеется файл alert.blade.php, в котором происходит вывод сообщения, однако теперь добавляется новая переменная $title (заголовок).

Решение с помощью @include

<div class="alert alert-primary" role="alert">
    <div class="alert-title">{!! $title !!}</div>
 
    {!! $message !!}
</div>

@include('alert', [
    'title' => 'Внимание!',
    'message' => '<strong>Привет,</strong> мир!',
])

Решение с помощью @component

<div class="alert alert-primary" role="alert">
    <div class="alert-title">{!! $title !!}</div>
 
    {!! $slot !!}
</div>

@component('alert')
    @slot('title', 'Внимание!')
 
    <strong>Привет,</strong> мир!
@endcomponent

Выводы

Если посмотреть, то разницы между этими двумя методами нет. Однако, я обнаружил одно существенное различие между этими методами:

В других случаях, функциональных различий нету - только улучшение читабельности кода в отдельных ситуациях.

Подведем выводы.

Использовать @include, когда:

Во всех остальные случаях использовать @component и @slot.

Теги: #blade