Давайте посмотрим, что седьмая версия фреймворка привнесла в компоненты шаблонов.
Макетный способ
Сначала взглянем на макетный вариант повторного использования шаблонов. Создаем папку layout, а в папке view — файл app-layout.blade.php, используемый в welcome.blade.php.
// app-layout.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Blade с Компонентом</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.content {
text-align: center;
}
</style>
</head>
<body>
<div class="content">
@yield('content')
</div>
</body>
</html>
Файл welcome.blade.php:
@extends('layout/app-layout');
@section('content')
Это содержимое
@endsection
Мы задали макет в app-layout.blade.php и раскрыли его в шаблоне welcome.blade.php. Это называется восходящим подходом.
Старый компонентный подход
Теперь давайте теперь рассмотрим старый компонентный подход. Файл welcome.blade.php будет таким:
@component('layout.app-layout')
С компонентным подходом
@endcomponent
а в файле app-layout.blade.php будут такие изменения:
....
<body>
<div class="content">
{{ $slot }}
</div>
</body>
....
В итоге, мы получим тот же самый результат. Это старый способ использования компонентов, и возникает вопрос: а что нового принес Laravel 7?
Новый компонентный подход
Давайте попробуем реализуем всё тоже самое, но с помощью нового компонентного подхода.
php artisan make:component AppLayout
Эта команда создаст два файла вместе со каркасными каталогами. Модель шаблона — App\View\Components\AppLayout.php и сам шаблон resources\views\components\app-layout.blade.php.
Файл AppLayout.php будет выглядеть так:
namespace App\View\Components;
use Illuminate\View\Component;
class AppLayout extends Component
{
/**
* Create a new component instance.
*
* @param $title
*/
public function __construct()
{
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.app-layout');
}
}
Разберемся, как использовать эти файлы. Скопируем наш файл app-layout.blade.php в папку components и изменим welcome.blade.php
<x-app-layout>
Мы используем кастомный тег также, как и компонент
</x-app-layout>
Мы используем кастомный тег, также как и у компонентов Vue. Контент тега будет отображаться через {{ $slot }} в файле components\app-layout.blade.php. Здесь мы можем видеть новый способ задания имени компонента — Laravel пропарсит x-.
Напоминание: предыдущий способ использования компонента не удаляется!! Используйте тот, который удобен вам.
Передача данных компоненту
Мы можем передавать данные или атрибуты компонентам таким образом
<x-app-layout title="Приветственная страница">
Мы используем кастомный тег также, как и компонент
</x-app-layout>
в файле AppLayout.php:
namespace App\View\Components;
use Illuminate\View\Component;
class AppLayout extends Component
{
public $title;
/**
* Create a new component instance.
*
* @param $title
*/
public function __construct($title)
{
$this->title = $title;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.app-layout');
}
}
Здесь мы получаем заголовок и задаем его как публичное свойство, чтобы можно было его использовать в компоненте app-layout.
И далее используем его в app-layout.blade.php.
<head>
...
<title>{{ $title }}</title>
</head>
Кастомные слоты
Зачем нам нужны кастомные слоты? Предположим, что нужно показывать условную боковую панель. Что-то вроде этого:
<div class="flex p-2">
@if(isset($sidebar))
<aside>
{{$sidebar}}
</aside>
@endif
<main class="flex-one m-l-1">
{{ $slot }}
</main>
</div>
И использовать внутри welcome.blade.php как
<x-app-layout title="Приветственная страница">
<x-slot name="sidebar">
Это слот c названием
</x-slot>
Мы используем кастомный тег также, как и компонент
</x-app-layout>
Аналогичным образом мы можем создавать компоненты и повторно использовать blade-шаблоны.
Автор: Shrijan Tripahti
Перевод: Алексей Широков
Наш 
Телеграм-канал — следите за новостями о Laravel.