LARAVEL: ENVÍO DE DATOS A UN COMPONENTE BASADO EN CLASES BLADE

Para enviar datos a un componente basado en clases utilizamos los atributos de las etiquetas HTML.

<x-alert message="Hola mundo"/>

Las expresiones y variables PHP deben pasarse al componente a través de atributos que usen el carácter (:) dos puntos como prefijo, tal como se muestra a continuación:

@php
   $alert = "success";
@endphp

<x-alert :type="$alert" message="Hola mundo"/>

Debe definir y pasar al constructor del componente «app/View/Components/Alert.php» las variables publicas que va utilizar, no es necesario pasar los datos a la vista desde el método render del componente.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public string $type, $message;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($type = "danger", $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

En la vista del componente Blade «resources\views\components\alert.blade.php» puedes hacer eco de las variables publicas por su nombre.

<div class="alert alert-{{ $type }}" role="alert">
  {{ $message }}
</div>

Las variables publicas que se definen en la clase del componente «app/View/Components/Alert.php», todas aquellas propiedades HTML que se pasen a la etiqueta componente y que no estén definidas en la clase del componente pasaran a la bolsa de atributos.

@php
   $alert = "danger";
@endphp

<x-alert :type="$alert" message="Hola mundo" class="text-gray" id="alert"/>

podemos observar que solo «type» y «message» pueden ser llamados a través de su nombre de variable y si queremos utilizar «class» e «id» debemos hacer uso de la bolsa de atributos utilizando la variable reservada «attributes».

@props(['type' => "danger", 'message'])
<div  {{ $attributes }} class="alert alert-{{ $type }}" role="alert">
  {{ $message }}
 </div>

Si viéramos la salida en pantalla de la bolsa de atributos seria algo así:

class="text-gray" id="alert"

Por eso utilizamos la bolsa de atributos directamente en la etiqueta para aplicar los estilos definidos en el atributo «class», pero si ya definimos este atributo en nuestra vista del componente, esto genera que solo podamos ver el valor contenido en el primer atributo con ese nombre, para resolver este problema podemos fusionar los valores de ambos utilizando el método merge de la bolsa de atributos.

@props(['type' => "danger", 'message'])
<div  {{ $attributes->merge([ 'class' => 'alert alert-'.$type]) }}   role="alert">
  {{ $message }}
</div>

El método merge recibe como parámetro un array asociativo, el cual como clave debe ser el nombre del atributo y su valor.

Al renderizar el componente en el navegador veremos lo siguiente:

<div class="alert alert-success text-gray" id="alert" role="alert">
  Hola mundo
</div>