Versión imprimible multipagina. Haga click aquí para imprimir.

Volver a la vista normal de esta página.

Componentes

Introducción a los Componentes de Blade en Laravel

¿Qué son los Componentes de Blade?

Los componentes de Blade en Laravel son una poderosa herramienta para reutilizar código HTML y PHP en tus vistas.

Estos componentes son archivos .blade.php que residen en la carpeta resources/views/components. Si la carpeta no existe, puedes crearla manualmente. El hecho de que cada componente sea un archivo .blade.php independiente, facilita su reutilización y mantenimiento.

Idea de usar componentes

Descomponer un diseño complejo (layout) en elementos más pequeños y manejables conocidos como componentes.

Al crear un layout, este se convierte en una composición de estos ficheros individuales. Cada componente representa una parte del layout , como: una cabecera, pie de página, sección principal o barra de navegación como podemos ver en la siguiente imagen:

Creación y Uso de Componentes

Tenemos dos formas de crear un componente:

Componente anónimo . Crear el fichero directamente en la carpeta correspondiente
Componentes basados en clases . A través de una clase usando Artisan****

Creando el componentes directamente

Simplemente creamos el fichero desde nuestro EDI.
En nuestro caso creamos los ficheros header.blade,php, main.blade.php, nav.blade.php y footer.blade.php .

Como son parte del layout, podríamos crearlo dentro de una carpeta llamada layout, por cuestiones organizativas:

Creando el componente con Artisan

Podemos crearlo a partir de una clase. El funcionamiento es igual. La forma de crearlo sería con artisan: Vamos a hacerlo para nuestro ejemplo:

1

php artisan make:Component nombre_componente

Crear componente directo Vs con Artisan

Artisan

Usar Artisan para crear componentes tiene ventajas:

Estructura Consistente : Artisan genera automáticamente la estructura de archivos necesaria, asegurando consistencia en todo el proyecto.
Rapidez y Conveniencia : Es rápido y evita la posibilidad de errores al crear los archivos manualmente.
- Comandos Claros : Los comandos de Artisan son claros y documentados, lo que facilita su uso y aprendizaje.
  1
  
  php artisan make:component NombreDelComponente
  Si queremos crear el componente en una carpeta concreta lo podemos hacer especificandolo
  1
  
  php artisan make:component directorio/.../NombreDelComponente
- Esto crea un nuevo componente en resources/views/components y un archivo de clase correspondiente en app/View/Components .

Crear Componentes Manualmente

Crear componentes manualmente también buena que te da más control en la estructura y organización de carpetas:

Flexibilidad : Tienes control total sobre la estructura y organización de tus archivos.
Simplicidad : Para proyectos más pequeños o si prefieres un enfoque más “manual”, este método puede ser más directo.

Para crear un componente manualmente:

Crea un archivo Blade en resources/views/components .
Opcionalmente, crea una clase de componente en app/View/Components .

Conclusión personal

Proyectos Grandes o en Equipos:

Usar Artisan es generalmente más recomendado, ya que asegura una estructura coherente y reduce el riesgo de errores.

Para Proyectos Pequeños o Preferencias Personales:

Si prefieres un control más directo o trabajas en un proyecto más pequeño, crear los archivos manualmente puede ser igualmente efectivo.

Referenciar un Componente

Para usar un componente en tus vistas Blade, lo referencias como un elemento HTML, pero con una sintaxis especial que incluye un prefijo x-::

<x-miComponente />

x-nombre

Cuando referenciamos un elemento con

&lt;x-&hellip;&gt;

resources/views/components

x-capeta.sub.nombre

Si el componentes estuvier en subcarpetas, lo podemos especicar con puntos.

De esta forma

x-capeta.sub.componentes

resources/views/components/carpeta/sub/nombre.blade.php

Nuestro ejemplo

Creamos los componentes usando artisan.

Ubicación

Como todos son para el layout, los creamos en la carpeta layout

php artisan make:component layout/Header
php artisan make:component layout/Nav
php artisan make:component layout/Main
php artisan make:component layout/Footer

La imagen muestra el resultado generado

Variables en Componentes

Los componentes de Blade ofrecen acceso a varias variables y objetos especiales que facilitan la construcción de interfaces dinámicas y reutilizables. Los más usados

$slot
$attributes
$errors

$slot

Contiene el contenido que se pasa al componente desde donde se llama.

Fichero layout

<x-layout.main>
<h1> Este es un contendio para el componente, lo recibirá como $slot</h1>
</x-layout.main>

Fichero del componente main.blade.php

 <header class="hidden lg:flex h-15v bg-header flex flex-row justify-center items-center">
    <img class="w-1/5 max-h-full w-auto  p-5 " src="{{asset("images/logos/logo.png")}}" alt="logo nett">
    <div class="w-3/5 flex justify-center items-center">
        <h1 class="text-3xl text-white h-auto max-w-full truncate ">
          {{$slot}}
        </h1>
    </div>
<!-- ...  -->
</header>

$atributes

Permite acceder a atributos adicionales pasados al componente. La variable $attributes en los componentes de Blade de Laravel es una instancia de Illuminate\View\ComponentAttributeBag

Proporciona varios métodos útiles para manipular los atributos que se pasan a un componente
Uno de los métodos más útiles es merge() :

merge()

Fusiona los atributos predeterminados del componente con los atributos adicionales proporcionados en la vista.

El método merge() se usa comúnmente para combinar clases CSS y otros atributos. Esto es especialmente útil cuando deseas que tu componente tenga algunas clases CSS por defecto, pero también quieres permitir que se añadan clases adicionales desde fuera del componente.

Supongamos el siguiente ejemplo donde tenemos un componente boton.blade.php:
Aquí, btn btn-default son las clases predeterminadas para todos los botones.

1
2
3


<button {{ $attributes->merge(['class' => 'btn btn-default']) }}>
{{ $slot }}
</button>

Cuando usas el componente y pasas clases adicionales:

Laravel fusionará las clases, resultando en un botón que tiene class=“btn btn-default btn-large”.

1

<x-boton class="btn-large">Click Aquí</x-boton>

Laravel fusionará las clases, resultando en un botón que tiene class=“btn btn-default btn-large”.

Otros Métodos de $attributes

only(): Devuelve solo un subconjunto de los atributos.
except(): Devuelve todos los atributos excepto los especificados.
class(): Devuelve una instancia de Illuminate\View\ComponentAttributeBag solo con las clases.
first(): Devuelve el primer valor de los atributos especificados.

Pasando atributos a un componentes

Para pasar atributos a un componente, usamos una sintaxis similar a la de las etiquetas HTML:

<x-miComponente atributo="valor" />

Posteriormente en el componete podemos utilzar dicho valor.

Si lo establecemos, Laravel proporciona una conversión automática entre la notación kebab-case en la invocación del componente y camelCase dentro del componente.

Notación Kebab-Case y CamelCase

Kebab-Case: Usada al pasar atributos al componente. Ejemplo: mi-atributo.
CamelCase: Usada dentro del componente para referenciar estos atributos. Ejemplo: miAtributo.

Cuando invocas un componente y pasas un atributo, usas kebab-case:

<x-miComponente mi-atributo="valor" />

Dentro del archivo del componente, Laravel convierte automáticamente mi-atributo a miAtributo:

<!-- miComponente.blade.php -->
<div>
    {{ $miAtributo }} <!-- Accede al valor de 'mi-atributo' -->
</div>
```