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, por ejemplo, para mostrar el precio de un producto.

Necesito este component básicamente porque el formato de números que uso es diferente del que trae Laravel, cambiare 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) $number,
        2,
        '.',
        ','
    )
}}

Voy a encapsular esto en un componente, después de esto en la vista pondré: <x-number :amount="$price" /> € , para mostrar el precio de un producto, por ejemplo.

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