3-Entendiendo los Slots en los Componentes de Laravel Blade

 

Entendiendo los Slots en los Componentes de Laravel Blade

Los slots son una característica fundamental de los componentes en Laravel Blade que permiten inyectar contenido dinámico dentro de tus componentes. Son similares a los "children" en otros sistemas de componentes.

Conceptos Básicos de Slots

1. Slot Principal ($slot)

El slot principal es el contenido que se pasa entre las etiquetas de apertura y cierre del componente.

Ejemplo de uso:

html
<x-alert>
    Este es el contenido que irá en el slot principal
</x-alert>

En el componente (resources/views/components/alert.blade.php):

html
<div class="alert">
    {{ $slot }} <!-- Aquí se renderizará el contenido -->
</div>

2. Slots Nombrados

Permiten tener múltiples áreas de contenido en un componente.

Ejemplo de uso:

html
<x-card>
    <x-slot name="header">
        Título de la tarjeta
    </x-slot>

    Contenido principal de la tarjeta

    <x-slot name="footer">
        Pie de la tarjeta
    </x-slot>
</x-card>

Componente card.blade.php:

html
<div class="card">
    <div class="card-header">
        {{ $header }}
    </div>

    <div class="card-body">
        {{ $slot }} <!-- Slot principal -->
    </div>

    <div class="card-footer">
        {{ $footer }}
    </div>
</div>

Ejemplo Práctico con el Gestor de Tareas

1. Componente Layout con Slots

Componente app-layout (resources/views/layouts/app.blade.php):

html
<!DOCTYPE html>
<html>
<head>
    <title>{{ $title ?? 'Gestor de Tareas' }}</title>
</head>
<body>
    <x-navbar />
    
    <main class="container">
        <!-- Slot principal para el contenido específico de cada página -->
        {{ $slot }}
    </main>
    
    <x-footer>
        <!-- Slot con valor por defecto -->
        <x-slot name="copyright">
            &copy; {{ date('Y') }} Gestor de Tareas
        </x-slot>
    </x-footer>
</body>
</html>

2. Uso del Layout en una Vista

resources/views/tareas/index.blade.php:

html
<x-app-layout title="Lista de Tareas">
    <!-- Este contenido va al slot principal -->
    <h1>Mis Tareas</h1>
    
    @foreach($tareas as $tarea)
        <x-tarea-card :tarea="$tarea">
            <!-- Slot adicional para acciones -->
            <x-slot name="acciones">
                <x-boton href="{{ route('tareas.mostrar', $tarea['id']) }}">
                    Ver Detalles
                </x-boton>
            </x-slot>
        </x-tarea-card>
    @endforeach
</x-app-layout>

3. Componente TareaCard con Slots

resources/views/components/tarea-card.blade.php:

html
<div class="tarea {{ $tarea['completada'] ? 'completada' : 'pendiente' }}">
    <h3>{{ $tarea['titulo'] }}</h3>
    <p>{{ $tarea['descripcion'] }}</p>
    
    <!-- Slot para contenido adicional -->
    @isset($acciones)
        <div class="acciones">
            {{ $acciones }}
        </div>
    @endisset
    
    <!-- Slot principal para cualquier otro contenido -->
    {{ $slot }}
</div>

Tipos de Slots Avanzados

1. Slots con Valores por Defecto

Puedes definir valores por defecto para los slots:

html
@props(['title' => 'Título por defecto'])

<h2>{{ $title }}</h2>
{{ $slot }}

2. Slots Escopados

Pasas datos al slot como si fuera un componente:

html
<x-table :$users>
    <x-slot:header column="nombre">
        Nombre del Usuario
    </x-slot:header>
</x-table>

En el componente:

html
@props(['users'])

<table>
    <thead>
        <tr>
            {{ $header(['column' => 'nombre']) }}
        </tr>
    </thead>
    <!-- ... -->
</table>

Buenas Prácticas con Slots

  1. Usa slots nombrados para contenido complejo con múltiples secciones

  2. Mantén los slots simples - si necesitas mucha lógica, considera dividir en más componentes

  3. Documenta los slots disponibles en componentes complejos con comentarios

  4. Usa valores por defecto para hacer componentes más flexibles

  5. Considera slots escopados cuando necesites pasar datos al contenido del slot

Los slots son una herramienta poderosa en Laravel Blade que te permite crear componentes altamente reutilizables y flexibles, manteniendo un código limpio y organizado

Comentarios

Publicar un comentario

Entradas más populares de este blog

8-Creación de una API RESTful con Laravel

  Creación de una API RESTful con Laravel En este tutorial, te guiaré paso a paso para crear una API RESTful básica con Laravel, incluyendo autenticación, rutas, controladores y migraciones. Requisitos previos PHP ≥ 8.1 Composer instalado Laravel instalado globalmente Conocimientos básicos de PHP y Laravel Base de datos configurada (MySQL, PostgreSQL, SQLite, etc.) Paso 1: Crear un nuevo proyecto Laravel bash laravel nuevo mi-api-laravel # O usando composer composer create-project laravel/laravel mi-api-laravel Accede al directorio del proyecto: bash cd mi-api-laravel Paso 2: Configurar la base de datos Abre el archivo  .env  y configura las credenciales de tu base de datos: env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=mi_api_laravel DB_USERNAME=root DB_PASSWORD= Paso 3: Crear un modelo con migración, controlador y factory Vamos a crear un modelo  Producto  como ejemplo: bash php artisan make:model Producto -mcr Esto creará: Un modelo ( ...
Leer más

02 -Rutas en Laravel

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . Tipos básicos de rutas 1. Rutas básicas php Copy Download Route :: get ( '/saludo' , function ( ) { return '¡Hola Mundo!' ; } ) ; Cuando se visita  /saludo  en el navegador, se mostrará "¡Hola Mundo!". 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 4. Rutas con restricciones php Copy Download Rout...
Leer más

3-Rutas

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 5. Rutas con nombre php Copy Download Route :: get ( '/perfil' , function ( ) { // ... } ) -> name ( 'perfil' ) ; Puedes generar URLs a esta ruta usando  route('perfil') . Rutas hacia controladores php Copy Download Route :: get ( '/productos'...
Leer más