Laravel proporciona un sistema de componentes para Blade que podemos utilizar para crear todo tipo de componentes reusables. En este videotutorial vamos a explorar cómo podemos crear layouts utilizando esta característica del framework.
Mira el código en GitHub: actual, resultado, comparación.
Podemos crear un nuevo componente desde la terminal usando el siguiente comando:
php artisan make:component layout
Una vez ejecutado el comando deberíamos recibir el mensaje Component created successfully.
Los componentes son creados dentro del directorio app/View/Components
En nuestro caso este componente debería llamarse Layout.php y dentro de este archivo encontramos un método público llamado render. Este método, como su nombre lo indica, se encarga de retornar la vista components.layout.
Encontramos la vista dentro del directorio resources/views/components
Al trabajar con componentes en lugar de utilizar la directiva @yield, vamos a imprimir el contenido de la variable $slot.
En el caso del título, en lugar de utilizar la directiva @yield, imprimiríamos el contenido de la variable $title. En caso de que esta variable no esté definida, vamos a imprimir el título «App de notas», que será nuestro título por defecto:
{{ $title ?? 'App de notas' }}
Para hacer uso del componente en otra vista como create.blade.php, eliminamos las directivas @extends y @section, y en su lugar, añadimos la etiqueta <x-layout>. Todo el contenido que vaya dentro de estas etiquetas será considerado el valor de la variable $slot.
<x-layout>
<!-- Contenido de la vista -->
</x-layout>
Para personalizar el título, debemos hacer uso de la directiva <x-slot>. El nombre del «slot» en este caso será title, y su contenido será nuestro título personalizado.
<x-slot name="title">
Nueva nota
</x-slot>
También podemos utilizar la sintaxis <x-slot:title>Nueva nota</x-slot:title>
Podemos pasar datos o variables desde el código de nuestro componente a nuestra vista, de la misma forma que lo haríamos desde un controlador:
return view('components.layout', ['currentYear' => date('Y')]);
Ahora, en nuestra vista podemos hacer uso de la variable $currentYear.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Layouts tradicionales con Laravel 10 y Blade Lección siguiente Generar URLs con Laravel 10