46. Componentes de clase

Los componentes de clase en Laravel 10 son una herramienta útil para encapsular la funcionalidad de la vista en clases reutilizables y fáciles de mantener. En lugar de definir toda la lógica de presentación en una vista Blade, puedes crear un componente de clase que maneje la lógica y la reutilice en varias vistas.

Para crear un componente de clase en Laravel 10, debes crear una nueva clase que extienda la clase base de componentes de Laravel, que es Illuminate\View\Component. Esta clase debe definir un método render que devuelva la vista Blade que representa el componente.

Por ejemplo, supongamos que quieres crear un componente de clase para mostrar una lista de tareas. Primero, puedes crear una nueva clase llamada TaskList que extienda la clase base de componentes de Laravel:

namespace App\View\Components;
use Illuminate\View\Component;
class TaskList extends Component
{
   public function render()
   {
       return view('components.task-list');
   }
}

Luego, puedes crear una vista Blade llamada 'task-list.blade.php

<ul>
   @foreach ($tasks as $task)
       <li>{{ $task->name }}</li>
   @endforeach
</ul>

Finalmente, puedes incluir el componente de clase en una vista Blade existente llamando a la directiva 'x

<x-task-list :tasks="$tasks" />

En este ejemplo, la variable '$tasks se pasa al componente de clase como un parámetro a través del atributo 'tasks. El componente de clase procesa los datos y muestra la lista de tareas utilizando la vista Blade 'task-list.blade.phptask-list.blade.php.

Los componentes de clase en Laravel 10 son una forma poderosa de mejorar la organización y la reutilización del código de la vista. Pueden simplificar el mantenimiento de la aplicación al encapsular la funcionalidad de la vista en clases separadas, lo que facilita la lectura y la modificación del código.

Hola Víctor. Lo de los slots con nombre, no me funciona. Lo hago tal cual muestras y laravel me devuelve un error que pone “Undefined variable $title”.

¿Por qué puede ser?

Muchas gracias y un saludo.

Hola Victor, hago tal cual tienes en el video, pero por ejemplo yo añado las clases: 

my-2 border-l-4 border-red-900 bg-red-300 font-bold text-red-700 p-2 w-full

cambiando el color por el verde y el azul en success e info, el problema es que al mostrar la alerta, el rojo me muestra todo bien, borde en rojo y todo, pero la verde y la azul no, te dejo 3 capturas. 

este seria el azul: 
https://imgur.com/rPZTDM4

este el rojo:
https://imgur.com/jlCFx6X

este el verde:
https://imgur.com/MNKGTkB

el código del componente es:

<div role="alert" {{$attributes->merge(['class' => $class])}}>

<span>{{ $slot }}</span>

</div>

y el del constructor de la alerta es este:

https://imgur.com/undefined

Muchas gracias!

-