Многие разработчики не видят разницы между методом @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, когда:
- Нужно просто вывести содержимое файла, не передав какие-либо переменные
- Переменных не так много (1-2) и вам больше нравится использовать @include
- Переменные не содержает HTML и синтаксис Blade
Во всех остальные случаях использовать @component и @slot.
Понравилось прочитанное?
Дайте мне «пять», кликнув раз, или же поаплодируйте быстрыми нажатиями, чтобы показать, насколько вам понравился материал.
Комментарии