Primero: ¿qué es un componente?-b-fun

Primero: ¿qué es un componente?

Un componente es como una función que devuelve HTML.

Tú la defines una vez.
La usas muchas veces.
Le puedes pasar datos.
Le puedes pasar contenido.

Eso es todo.

Paso 1: Crear el componente (la "función")

Archivo:

resources/views/components/saludo.blade.php

Contenido:

@props(['nombre' => 'Mundo'])

<p>Hola, {{ $nombre }}!</p>
{{ $slot }}

Aquí estás definiendo cómo se ve el componente.

Léelo así:

@props(['nombre' => 'Mundo']) → "Voy a recibir un dato llamado nombre. Si nadie me lo pasa, uso Mundo."
<p>Hola, {{ $nombre }}!</p> → "Imprimo el nombre."
{{ $slot }} → "Aquí va el contenido extra que me pasen cuando me usen."

⚠️ Ojo importante: $slot NO es como @yield.
$slot no sirve para "insertar el componente en un layout".
$slot es simplemente el hueco donde va el contenido que está entre las etiquetas <x-saludo> y </x-saludo>.

Paso 2: Usar el componente

Aquí viene tu confusión: ¿por qué creo otro archivo de vista?

Porque un componente no se ejecuta solo. Necesitas una vista que lo use. Igual que una función no se ejecuta sola: alguien tiene que llamarla.

Esa vista puede ser:

home.blade.php
about.blade.php
o incluso otro componente

Archivo:

resources/views/home.blade.php

Contenido:

<x-saludo nombre="Ana">
    <strong>Bienvenida</strong>
</x-saludo>

Léelo así:

<x-saludo ...> → "Llama al componente saludo".
nombre="Ana" → "Pásale Ana a la propiedad nombre."
Todo lo que está entre <x-saludo> y </x-saludo> → eso es lo que se mete en {{ $slot }}.

Entonces:

$nombre = "Ana"
$slot = <strong>Bienvenida</strong>

Paso 3: El renderizado

Laravel junta las dos cosas y produce:

<p>Hola, Ana!</p>
<strong>Bienvenida</strong>

Fin.

Ahora tu duda grande: ¿cómo inserto el componente en el layout?

No lo insertas con $slot.

El componente se inserta donde tú escribes <x-saludo>. Punto.

Por ejemplo, si en home.blade.php escribes:

<h1>Mi página</h1>
<x-saludo nombre="Ana" />
<p>Fin</p>

Eso se renderiza como:

<h1>Mi página</h1>
<p>Hola, Ana!</p>
<p>Fin</p>

El componente aparece en la posición exacta donde lo escribiste. No hay que "inyectarlo" en ningún layout.

Aclaración clave: `@yield` vs `$slot`

Son cosas diferentes:

Cosa	¿Para qué sirve?
`@yield` / `@section` / `@extends`	Herencia de plantillas. Un layout con huecos que las vistas hijas rellenan.
`$slot`	Contenido que le pasas a un componente entre sus etiquetas.
`<x-nombre>`	Así usas un componente.

Con @extends/@yield → la vista hija "extiende" un layout.
Con componentes → tú usas <x-layout> dentro de otra vista.

Son dos formas distintas de reutilizar HTML. Laravel tiene las dos.

Analogía final

Piensa en una tarjeta de cumpleaños:

El componente = la plantilla de la tarjeta ("Para: ___, Feliz cumple, ___").
@props = el campo "Para: ___".
$slot = el espacio donde escribes tu mensaje personal.
<x-tarjeta> = el acto de rellenar la tarjeta y entregarla.

Cada vez que usas <x-saludo>, estás "rellenando" una tarjeta nueva con datos nuevos.

Resumen en 3 líneas

Defines el componente en resources/views/components/saludo.blade.php con @props y $slot.
Lo usas en cualquier vista escribiendo <x-saludo>...</x-saludo>.
Laravel lo reemplaza por el HTML del componente, metiendo el contenido entre las etiquetas en $slot.

**************

Lo que pasa es que el texto que me pasaste usa una palabra que confunde: "vista hija".

Vamos a destaparlo.

Lo que dice tu archivo

resources/views/home.blade.php:

<x-layout title="Lista de tareas">
    <h1>¡Bienvenido!</h1>
    <ul>
        <li>Tarea 1</li>
    </ul>
</x-layout>

Y arriba lo llama: "Uso del componente (vista hija)".

Eso es lo mismo que yo te expliqué:

home.blade.php usa el componente.
<x-layout> llama al componente layout.blade.php.
title="Lista de tareas" → va a $title.
Lo de adentro (<h1> y <ul>) → va a $slot.

No hay nada distinto. Es idéntico.

Entonces, ¿por qué dice "vista hija"?

Por costumbre. Antes de que existieran los componentes, en Blade clásico se hacía así:

{{-- layouts/app.blade.php (vista PADRE) --}}
<html>
    <body>
        @yield('content')
    </body>
</html>

{{-- home.blade.php (vista HIJA) --}}
@extends('layouts.app')

@section('content')
    <h1>¡Bienvenido!</h1>
@endsection

Ahí sí había una relación padre → hijo:

app.blade.php era el padre.
home.blade.php extendía al padre → era el hijo.

Con componentes esa relación ya no existe. Ya no hay "padre" ni "hijo". Ahora hay:

Un componente (layout.blade.php).
Una vista que lo usa (home.blade.php).

Pero mucha gente sigue llamando "vista hija" a la vista que usa el componente, por inercia del sistema viejo. Es solo un nombre heredado, no cambia nada técnicamente.

Comparación para que lo veas claro

Blade clásico	Componentes
`@extends('layouts.app')`	`<x-layout>`
`@yield('title')`	`@props(['title' => ...])`
`@section('content') ... @endsection`	Lo que va entre `<x-layout>` y `</x-layout>`
`@yield('content')`	`{{ $slot }}`
Vista "hija" que extiende	Vista que usa el componente

Mira la tabla: cada cosa del sistema viejo tiene su equivalente en componentes. Pero la relación ya no es padre/hijo, es "componente / quien lo usa".

El detalle que sí debes notar

En el ejemplo de tu archivo, el HTML final muestra:

<li>Tarea 1</li>
<li>Tarea 2</li>
<li>Tarea 3</li>

Pero en home.blade.php solo está la Tarea 1. Las otras dos no existen en el código que te dieron.

Eso es un error del texto que copiaste. Laravel no inventa tareas. Si en el slot solo pusiste la Tarea 1, el HTML final solo tendrá la Tarea 1.

Probablemente quien escribió ese texto agregó Tarea 2 y Tarea 3 "a mano" para que se viera más bonito, pero contradice el código.

Resumen

No lo usan diferente. Es el mismo uso que te expliqué.
Lo único raro es que le dicen "vista hija", pero eso es vocabulario del Blade clásico (@extends), no de componentes.
Con componentes ya no hay padre/hijo, hay componente y vista que lo usa.
El HTML final de tu archivo tiene un error: muestra Tareas 2 y 3 que no están en el código.

¿Quieres que te muestre el mismo ejemplo pero escrito con Blade clásico (@extends + @yield) al lado del de componentes, para que veas la equivalencia uno a uno?

**********************

`$slot` está dentro del componente layout

Sí. {{ $slot }} está dentro de layout.blade.php. Y eso es correcto, porque layout.blade.php es un componente más.

Piénsalo así:

layout.blade.php es un componente.
Ese componente tiene un hueco llamado $slot.
Cualquiera que use <x-layout>...</x-layout> llena ese hueco con lo que ponga adentro.

No hay nada especial. Es el mismo mecanismo que el componente saludo de antes.

Compáralo con el componente `saludo`

Componente saludo:

{{-- resources/views/components/saludo.blade.php --}}
@props(['nombre' => 'Mundo'])

<p>Hola, {{ $nombre }}!</p>
{{ $slot }}

Componente layout:

{{-- resources/views/components/layout.blade.php --}}
@props(['title' => 'Mi App'])

<html>
    <head>
        <title>{{ $title }}</title>
    </head>
    <body>
        <header>Mi sitio web</header>
        <main>
            {{ $slot }}
        </main>
        <footer>© 2026</footer>
    </body>
</html>

Son lo mismo. La única diferencia es que uno es chiquito (un <p>) y el otro es grande (un HTML completo).

Ambos tienen @props.
Ambos tienen $slot.
Ambos se usan con <x-nombre>.

layout no es especial. Es solo un componente que casualmente envuelve todo el HTML de la página.

Entonces, ¿qué es lo que te confunde?

Creo que te confunde esto: el componente layout parece un "layout" de Blade clásico, y por eso piensas que $slot ahí funciona como @yield.

Pero no. Es la misma idea que en saludo. Solo que aquí el componente es tan grande que parece un layout.

Mira:

<x-layout title="Lista de tareas">
    <h1>¡Bienvenido!</h1>
</x-layout>

Laravel hace esto:

Ve <x-layout>.
Abre layout.blade.php.
Reemplaza {{ $title }} con "Lista de tareas".
Reemplaza {{ $slot }} con <h1>¡Bienvenido!</h1>.
Devuelve el HTML.

Exactamente igual que con saludo.

Por qué parece lo mismo que `@yield` (pero no lo es)

Porque el resultado es parecido. Ambos sirven para "meter contenido dentro de una plantilla". Pero el mecanismo es distinto:

	Blade clásico	Componente
Defines la plantilla	`layouts/app.blade.php`	`components/layout.blade.php`
La usas desde otra vista	`@extends('layouts.app')`	`<x-layout>`
El hueco	`@yield('content')`	`{{ $slot }}`
Rellenas el hueco	`@section('content') ... @endsection`	Contenido entre `<x-layout>` y `</x-layout>`

Fíjate: @yield y $slot ocupan el mismo lugar en la tabla. Ambos son "el hueco". Pero uno pertenece al sistema viejo y el otro al sistema de componentes.

La respuesta a tu duda

"El $slot está en el layout, creo eso es lo diferente."

No, eso no es diferente. Eso es exactamente lo que se supone que debe pasar.

$slot siempre vive dentro del componente que lo define.
En saludo, vive dentro de saludo.blade.php.
En layout, vive dentro de layout.blade.php.

Cada componente tiene su propio $slot, en su propio archivo. Y quien usa el componente llena ese $slot con contenido.

Resumen final

$slot siempre va dentro del componente.
layout.blade.php es un componente como cualquier otro, solo que es grande.
$slot no es @yield. Se parecen en el resultado, pero son sistemas distintos.
Cuando escribes <x-layout>...</x-layout>, todo lo de adentro va al $slot de layout.blade.php.

¿Ahora sí queda claro que layout es solo un componente grandote, y no un layout de Blade clásico

Buscar este blog

SOTELO-LARAVEL