IronWoods.es

Desarrollo web

Blog / Laravel / Componentes de las vistas (ViewComponents)

Laravel, desde la versión 7, dispone de los ViewComponents para crear fragmentos que pueden ser usados en los templates de Blade y recibir parámetros.

Ejemplo de componente

Voy a usar un ViewComponent que recibirá un número, para mostrar el precio de un producto.

Cambiaré el formato de los números, cambiando los puntos por comas y viceversa, además quiero mostrar un número de decimales, por defecto 2, aunque estos sean 0. Para esto en la vista tenía:


{{
    number_format(
        (float) $price,
        2,
        '.',
        ','
    )
}}

Voy a encapsular esto en un componente, después de esto en la vista pondré:


<x-number :amount="$price" /> €

Crear un componente

Creo el componente con el comando:

php artisan make:component NumberComponent

Se han creado los ficheros "resources/views/components/number-component.blade.php" y "app/Views/Components/NumberComponent.php". Dentro de este último, pondré lo siguiente:


<?php

namespace App\View\Components;

use Illuminate\View\Component;

class NumberComponent extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(
        $amount,
        $decimalsNumber = 2,
        $decimals  = '.',
        $thousands = ','
    )
    {
        $this->amount = number_format(
            (float) $amount,
            $decimalsNumber,
            $decimals,
            $thousands
        );
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.number')
            ->with('amount', $this->amount);
    }
}

Modifica el template "resources/views/components/number-component.blade.php" cambiando su contenido por este otro:


{{ $amount ?? '' }}

Listo, solo queda recargar el autoload:

composer dump-autoload