LARAVEL: ENVÍO DE DATOS A UN COMPONENTE ANONIMO BLADE

Para enviar datos a un componente anónimo utilizamos los atributos de las etiquetas HTML.

<x-alert message="Error en el envio de información"/>

En la vista del componente Blade «resources\views\components\alert.blade.php», puede mostrar el contenido de las variables públicas de la siguiente manera:

<div>
    {{ $message }}
</div>

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"/>

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>

PROPIEDAS Y ATRIBUTOS DE DATOS

Dado que los componentes no tienen ninguna clase asociada, es posible que se pregunte como se puede diferenciar que datos deben pasarse a la vista del componente como variables y que debe colocarse en la bolsa de atributos.

Puede especificar que atributos HTML deben considerarse variables de datos utilizando la directiva @props, ubicándola en la vista del componente afuera de la etiqueta padre que haya utilizado, tal como se muestra a continuación.

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

Como podemos ver la variable «type» tiene por defecto el valor de «danger» esto puede ser util si no queremos pasar la variable «type» y dejar que opere con su valor por defecto.

Agregamos los atributos HTML «class» e «id» en la etiqueta de nuestro componente.

@php
   $alert = "danger";
@endphp

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

podemos observar ahora 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>