---
title: "Aprende Laravel: Componentes de Blade"
excerpt: "Aprende a crear interfaces reutilizables con los componentes de Blade: componentes anónimos y de clase, pasar datos con props, slots y el attribute bag."
date: "2026-07-20T12:00:00.000Z"
category: "Laravel"
author:
  name: "angel cruz"
  picture: "https://angelcruzdevcdn.nyc3.cdn.digitaloceanspaces.com/images/me/angel-cruz.png"
ogImage:
  url: "/images/open-graph/laravel-opengraph-image.png"
seo_title: "Componentes de Blade en Laravel 13: props, slots y attributes"
seo_description: "Aprende los componentes de Blade en Laravel 13: anónimos vs de clase, pasar datos con props, slots (default y nombrados) y el attribute bag con merge."
keywords:
  - laravel
  - blade
  - componentes
  - php
  - laravel español
learning_path:
  series: "laravel-fundamentals"
  order: 11
  total: 13
  prev_slug: "aprende-laravel-testing-pest"
  next_slug: "aprende-laravel-artisan"
---

En el post de [vistas y layouts](/post/aprende-laravel-vistas-layouts) viste los fundamentos de Blade. Ahora vamos al patrón que más te va a ahorrar código: **los componentes son piezas de UI reutilizables que usas como si fueran etiquetas HTML** (`<x-alert/>`). En vez de copiar el mismo bloque de markup por todo el proyecto, lo defines una vez y lo reutilizas.

## Dos tipos de componentes

- **Anónimos**: solo un archivo Blade en `resources/views/components`. Perfectos para UI sin lógica.
- **De clase**: una clase PHP + su vista, para cuando el componente necesita lógica.

Se crean con Artisan:

```shell
php artisan make:component Alert
```

Eso genera la clase en `app/View/Components/Alert.php` y la vista en `resources/views/components/alert.blade.php`. Puedes anidar con carpetas:

```shell
php artisan make:component Forms/Input
```

## Renderizar un componente

Se usan con el prefijo `x-` seguido del nombre en kebab-case:

```blade
<x-alert/>

<x-forms.input/>
```

## Pasar datos: atributos y props

Los atributos simples se pasan como en HTML. Para pasar una **variable o expresión PHP**, antepón `:` al nombre:

```blade
<x-alert type="error" :message="$message"/>
```

En un **componente anónimo**, declaras qué props espera con la directiva `@props` al tope de la vista (con valores por defecto opcionales):

```blade
@props(['type' => 'info', 'message'])

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>
```

En un **componente de clase**, las propiedades públicas de la clase quedan disponibles en la vista automáticamente.

## Slots: contenido dinámico dentro del componente

El contenido que pones entre las etiquetas del componente llega como el slot por defecto, `{{ $slot }}`:

```blade
{{-- Uso --}}
<x-alert>
    Algo salió mal.
</x-alert>

{{-- resources/views/components/alert.blade.php --}}
<div class="alert">
    {{ $slot }}
</div>
```

Y puedes tener **slots nombrados** para varias zonas:

```blade
{{-- Uso --}}
<x-alert>
    <x-slot:title>Error</x-slot>
    No se pudo guardar.
</x-alert>

{{-- Componente --}}
<div class="alert">
    <h4>{{ $title }}</h4>
    {{ $slot }}
</div>
```

## El attribute bag: reenviar atributos

Cuando renderizas `<x-alert class="mt-4"/>`, ese `class` extra no aparece solo: lo controlas con `$attributes`. Lo más útil es `merge()`, que combina tus clases fijas con las que pasen desde afuera:

```blade
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>
```

Así el componente trae sus estilos base y quien lo usa puede sumar los suyos sin romper nada. Para clases condicionales, tienes `->class([...])`:

```blade
<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
    {{ $message }}
</div>
```

## Siguiente Paso

Ya sabes construir UI reutilizable. Toca conocer la herramienta que usaste todo el tiempo sin detenerte a mirarla: la consola de Laravel. Sigue con [Aprende Laravel: Artisan](/post/aprende-laravel-artisan).

## Preguntas Frecuentes

### ¿Cuál es la diferencia entre un componente anónimo y uno de clase?

El anónimo es solo un archivo Blade (ideal para UI sin lógica). El de clase tiene además una clase PHP donde poner lógica y propiedades. Empieza por anónimos y pasa a clase cuando necesites lógica.

### ¿Cómo paso una variable a un componente?

Con `:` delante del atributo: `<x-alert :message="$message"/>`. Sin `:` el valor se toma como texto literal.

### ¿Qué es un slot?

El contenido que pones entre las etiquetas del componente. El slot por defecto es `{{ $slot }}`; también puedes tener slots nombrados con `<x-slot:nombre>`.

### ¿Para qué sirve $attributes->merge()?

Para combinar los atributos (como `class`) que trae el componente con los que le pasa quien lo usa, sin pisarlos. Es lo que hace que un componente sea flexible.

## Recursos Adicionales

- [Blade Templates | Laravel 13.x](https://laravel.com/docs/13.x/blade)
- [Aprende Laravel: Vistas & Layouts](/post/aprende-laravel-vistas-layouts)
- [Aprende Laravel desde cero (serie completa)](/laravel-fundamentals)

---

## Sitemap

Índice completo del sitio: [/sitemap.md](https://www.angelcruz.dev/sitemap.md)

Canónico HTML: [https://www.angelcruz.dev/post/aprende-laravel-blade-componentes](https://www.angelcruz.dev/post/aprende-laravel-blade-componentes)