Componentes y slots en Laravel 5.4

En Laravel 5.4, el sistema de plantillas Blade incluye componentes y slots parecidos a los de Vue.js. Los componentes y slots proveen de beneficios similares al uso de secciones y layouts que ya conocemos, sin embargo son más fáciles de entender y podemos usarlos tanto para layouts como para pequeños widgets o vistas parciales. En la siguiente lección te enseñaremos cómo sacarle provecho a este nuevo feature:

Secciones vs componentes en Blade

Para definir layouts de la forma tradicional con Blade en Laravel usamos la directiva @yield de esta forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield('title', 'Laravel')</title>
</head>
<body>
    @yield('content')
</body>
</html>

Luego extender un layout lo logramos de esta manera:

@extends('vista.del.layout')

@section('title', 'Bienvenido a Styde')

@section('content')
    Contenido aquí
@endsection

Con los nuevos componentes y slots de Laravel 5.4 podemos lograr el mismo resultado de la siguiente forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ $title or 'Laravel' }}</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

Y en la plantilla donde quieres usar el layout:

@component('vista.del.layout')
    @slot('title', 'Bienvenido a Styde')

    Contenido aquí
@endcomponent

Partials vs componentes

Dado cualquier partial como éste:

    <div class="thumbnail">
        <img src="{{ $image }}" alt="{{ $title }}">
        <div class="caption">
            <h3>{{ $title }}</h3>
            <p>{{ $slot }}</p>
        </div>
    </div>

Podemos incluirlo en una vista utilizando la directiva @include:

@include('components/thumbnail', [
    'title' => 'Styde',
    'image' => asset('img/styde.jpg'),
    'slot' => 'styde.net'
])

O a partir de Laravel 5.4 podemos incluirlo como un componente:

@component('components/thumbnail')
    @slot('title', 'Styde')

    @slot('image', asset('img/styde.jpg'))

    Comunidad de desarrollo web.
@endcomponent