Componentes de clase
Comprar curso

48. Componentes de clase

En este capítulo, aprenderás cómo utilizar los componentes de clase en Laravel 10. Los componentes de clase son una forma de encapsular la funcionalidad de la vista en clases reutilizables y fáciles de mantener.


3 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 11 meses Destacado

    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.

  • Francisco Villalba

    Francisco Villalba hace 1 año

    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.

    • Victor Arana Flores hace 1 año

      Hola Francisco. Manda tu codigo para poder ver que estás haciendo mal.

    • Jonatan hace 11 meses

      A mi también me ha pasado y era porque tenía el resto de ejemplos que Victor fue poniendo y al modificar el componente con el slot title, cdo se llama a ese componente se le debe pasar siempre el title. Por eso me daba error. Mira a ver si dejando solo el último ejemplo te desaparece el error.
      Un saludo!

  • Nicasio Martinez

    Nicasio Martinez hace 1 año

    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!

     

    -

    • Victor Arana Flores hace 1 año

      Hola, ejecuta el servidor de vite con npm run dev.

      De lo contrario solo podras usar las utilidades que se usaron para construir la plantila de jetstream.