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.
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.
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:
@purple({{)
number_format(
(float) $number,
@lilac(2),
@yellow('.'),
@yellow(',')
)
@purple(}})
@endcode
Voy a encapsular esto en un componente,
después de esto en la vista pondré:
@icode
<x-number :amount="$price" /> €
,
para mostrar el precio de un producto, por ejemplo.
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:
@purple({{)
$amount @purple(??) @yellow('')
@purple(}})
@endicode
. Listo, solo queda recargar el autoload:
composer dump-autoload
15-11-2020