Blade компоненты в Laravel 7

Laravel 7 Blade Component

Давайте посмотрим, что седьмая версия фреймворка привнесла в компоненты шаблонов.

Макетный способ

Сначала взглянем на макетный вариант повторного использования шаблонов. Создаем папку 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.


Задать вопросы по урокам можно на нашем форуме.