Laravel Livewire Eventos del padre al hijo y uso de parámetros

Ya tenemos el flujo del formulario paso por paso completo; lo siguiente que vamos a implementar, será el pase del identificador correspondiente al registro que se crea en el paso uno; es decir, cuando procesamos el primer formulario (desde el componente principal) se genera el ID en la base de datos que luego vamos a pasar a todos los hijos ya que recuerda que todos los componentes hijos tienen una relación de tipo foránea con el contacto general.

Vamos a definir un evento, el mismo evento en todos los componentes hijos, para recibir la PK desde el padre:

app/Http/Livewire/Contact/Company.php
app/Http/Livewire/Contact/Person.php
app/Http/Livewire/Contact/Detail.php

protected $listeners = ['parentId'];   
// ***
public $parentId;
// ***
public function parentId($parentId)
{
   $this->parentId = $parentId;
}

Como puedes ver, es el enfoque inverso al paso por paso, ya que ahora, son los hijos los que registran el evento escuchador, el problema que vamos a tener, es que, como los componentes hijos no se encuentran renderizados por defecto, si no, en base a alguna condición:

@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail')
@else

Pasar parametros del padre a los hijos

Como comentamos anteriormente, el pase de los eventos del padre al hijo para la implementación que tenemos actualmente, no va a funcionar ya que, al momento de que se envía el evento del padre los componentes hijos aún no han sido creados (un posible enfoque para poder emplear los eventos es ocultar los formularios del paso por paso mediante CSS y mostrarlos en base al paso actual; aun así, el uso de los eventos no es necesario para enviar datos de un componente padre a los hijos, perfectamente podemos emplear el suministros de parámetros en su lugar como vemos a continuación:

@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])

Y definimos el método de mount en cada uno de los pasos hijos:

app/Http/Livewire/Contact/Company.php
app/Http/Livewire/Contact/Person.php
app/Http/Livewire/Contact/Detail.php
function mount($parentId)
{
  $this->parentId($parentId);
}

Transcripción del vídeo

Por aquí tengo varias cositas muy importantes que te quiero explicar vamos a ir primero con lo de los eventos vamos a hacer un poco de extracción ya que por aquí puedes ver que hay código que no estaba antes ya te explico un poco de esto Esto es atado un poco a lo que te decía que no es necesario ampliar los eventos al menos todo depende un poco pero al menos en este caso en particular para lo que sería la comunicación entre el padre al hijo ya que aquí ya la comunicación la tenemos directa porque este viene siendo el padre y aquí tenemos los hijos:

@if ($step == 1)
   <form wire:submit.prevent='submit'>
       <x-label>{{ __('Subject') }}</x-label>
       <x-input-error for='subject' />
       <x-input type='text' wire:model='subject' />
       <x-label>{{ __('Type') }}</x-label>
       <x-input-error for='type' />
       <select wire:model='type'>
           <option value=""></option>
           <option value="person">{{ __('Person') }}</option>
           <option value="company">{{ __('Company') }}</option>
       </select>
       <x-label>{{ __('Message') }}</x-label>
       <x-input-error for='message' />
       <textarea wire:model='message'></textarea>
       <div class="flex mt-5 gap-3">
           <x-button type='submit'>{{ __('Send') }}</x-button>
       </div>
   </form>
@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])
@else
   END
@endif
{{-- @livewire('contact.person') --}}

El padre, es otro componente de Livewire que incluye el formulario de la vista anterior, los pasos o componente hijos son cada uno de los componentes cargados en el padre con @livewire.

Los podemos enviar cualquier información cuando nosotros queramos y aprovechar un poquito lo que es entre comillas la reactividad que tenemos aquí que cuando actualizamos alguna propiedad automáticamente se actualiza pero ya vamos para allá entonces cuál era el problema con los eventos antes de comenzar tenemos Esto me había faltado decirte desde antes tenemos otra forma también de emplear los eventos en vez de colocar aquí el listener:

protected $listeners = ['parentId'];

También puedes emplear aquí el atributo llamado On que lo podemos

use Livewire\Attributes\On;
#[On('parentId')] 
   function parentId($id)
   {
       $this->parentId = $id;
       $c = ContactPerson::where('contact_general_id', $this->parentId)->first();
       if ($c != null) {
           $this->name = $c->name;
           $this->surname = $c->surname;
           $this->other = $c->other;
           $this->choices = $c->choices;
       }
   }

Importar desde igual que hicimos antes con los otros que vimos entonces ahí también tienes esta otra vez dualidad tu emplea la que tú quieras simplemente lo colocas como un decorador al método que tenemos aquí definido entonces ahí te lo dejo también comentado para que lo tengas de referencia entonces o empleas este o empleas este esquema el que tú quieras es independiente yo voy a dejarlo así ya que bueno lo tengo aquí definido eso por una parte.

Entonces por qué no están funcionando los eventos creo que es algo que cambió porque al menos para la versión anterior que yo probé que era la 9 y la 10 de Laravel con step No sí me había funcionado bien no sé si es que cambio algo por ahí etcétera pero veo que no el problema que tenemos aquí es que tenemos una especie de condición de carrera:

$this->dispatch('stepEvent', 4);
***
@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])
@else
   END

Cuando nosotros despachamos el evento desde el padre que indica que aquí podemos ver el identificador del padre si venimos acá No hay nadie que lo escuche porque todavía no se dibujado ninguno es decir aquí se despacha el evento no tenemos nada renderizado y por lo tanto al no tener nada renderizado no hay ningún componente que lo reciba es así de simple por lo tanto no va a aparecer nunca el identificador.

En otras palabras nunca va a llegar la referencia a la apk del padre del General Recuerda que esta es la app del General justamente esta función porque otra vez este evento no se va a ejecutar para hacer esta prueba lo que yo hice aquí fue colocar la impresión del parent ID por acá para que se viera si está llegando o no está llegando y aquí puedes ver este es el de persona aquí puedes ver cómo lo recibo:

***
      </form>
@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])
@else
   END
@endif
{{-- @livewire('contact.person') --}}

Voy a comentar esto un momentico Para que no haga ruido para no recibir nada y queda exactamente igual a como lo teníamos antes llegaría por el por el evento y poco más aquí aquí también cambia un poco lo que es la sintaxis puedes colocar para en ID me da igual pero el nombre del parámetro no importa y aquí lo estamos enviando:

$this->dispatch('stepEvent', 4);

Aquí otra vez estoy empleando otra cosita voy a quitarlo un momentico para hacer la prueba quito todo esto y esto acá Bueno a ver entonces aquí también lo estoy imprimiendo por fuera vamos allá.
 Entonces recuerda que al menos en mi caso para mi ejemplo esto primero te recomendaría que veas toda la explicación y luego lo repliques tú hagas tus pruebas y saques tus propias conclusiones estoy imprimiendo el parent ID que lo estoy Estableciendo otra vez por acá como una propiedad normalita pública por acá por lo tanto pudiéramos acceder la antes de aquí.
Aquí voy otra vez ahí está perfecto me había faltado guardar aquí por lo tanto había dejado el Mount y por lo tanto Era ese error que había aparecido en pantalla aquí puedes ver que no aparece nada no tenemos la apk otra vez aquí puedes ver la impresión no tenemos nada Y ese er el problema que no está llegando y no está llegando porque todavía no está renderizado y cómo puedes probar esto para que veas que es real puedes renderizar esto al menos de manera momentánea por acá es la ventaja que tenemos de emplear componentes que podemos colocarlo donde queramos en este caso Recuerda que no se está renderizando por el condicional ya que este no existe o este hasta que se dispare step pero cuando se dispare stet o estamos aquí actualizando este También estamos disparando el del parent y por lo tanto nadie lo recibe ya que esto por más que sea demora cierto tiempo en crearse el ciclo de vida que presentamos antes montarse y luego puedes que empezar a recibir los eventos entonces ya a partir de ese tiempo el evento ya pasó y no nadie lo recibió entonces voy a colocarlo por acá para ver qué pasa vuelvo acá Bueno aquí Fíjate que ya aparece no tienes que tener ningún error porque está correcta ente validado en este caso Este sí existe por lo tanto se haya alguien que lo reciba es lo importante Este es el otro el del paso por paso y aquí fíjate que se está ya voy por el 41 entonces ahí puedes tener como conclusión de que no podemos pasar un evento cuando lo tenemos aquí en un condicional Entonces como te digo también es importante que entiendas que esto lo estamos haciendo tipo experimento para trabajar un poco más con lightware ya yo estoy cansado de de de comentarte de quees es personalizar los pasos la información que manejan los pasos etcétera lo que me interesa a mí es transmitirte un poco lo que son cómo funciona internamente para cuando tengas que hacer una implementación similar ya tú sabes cuáles son sus ventajas desventajas cómo funciona Entonces es la idea un poco eso y es por eso que hago este tipo de videos Pero bueno aquí Lo importante es que concluyas de lo comentado anteriormente esto solamente recibe el evento porque él s está definido cuando se envía el evento desde padre mientras este no está definido Entonces esto no funcionaría En caso de que sea necesario para ti emplear los eventos aquí lo que pudieras hacer es ocultarlo mediante ccs para que siempre esté presente pero simplemente esté oculto porque lo importante aquí o el problema es que no está renderizado todavía pero si lo ocultas por ccs o con ccs ahí siempre va a estar disponible es decir está existiendo lo que pasa es que está ocultado mediante ccs y Bueno luego cuando é le corresponda simplemente lo muestras por ccs yo no voy a hacer esa implementación no veo que valga la pena pero como te digo es una posible solución ya que Obviamente si el componente no existe no está cargado obviamente no va a recibir nada que es el problema que tenemos.

Entonces ya con eso concluyo lo que es el uso de los eventos aquí en este caso entre el padre a los hijos que usualmente no tiene tanto sentido ya que como te digo Siempre el problema es la comunicación entre el hijo al padre que es Cuando tenemos una distancia como quien dice del hijo dentro del padre tal cual lo tenemos aquí tenemos un componente que está englobando otro componente queremos comunicarlo del hijo al padre cosa que puede ser muy común suponte que en vez de esto También tenemos un listado de publicaciones aquí tenemos una especie de detalle cuando actualicemos el detalle por ejemplo un cambio de estado aquí se cambia cierto colorcito entonces ahí enviamos una un mensaje un evento entre el hijo al padre cosas de ese tipo o simplemente lo eliminamos desde acá Tiene que desaparecer de acá enviamos un evento pero ya cuando es del padre es muy sencillo Porque si si lo eliminas aquí automáticamente se tiene que también eliminar acá en base a algún parámetro que estés determinando tal cual lo tenía antes Entonces en este caso lo mejor que podemos hacer es utilizar el envío de parámetros tal cual hacemos en las pistas entonces para esto bueno empleamos la siguiente sintaxis no tiene nada de raro es lo mismo que la misma sintaxis que empleamos a nivel de las vistas aquí indicamos el nombre del parámetro:

use Livewire\Attributes\On;
#[On('parentId')] 
   function parentId($id)
   {
       $this->parentId = $id;
       $c = ContactPerson::where('contact_general_id', $this->parentId)->first();
       if ($c != null) {
           $this->name = $c->name;
           $this->surname = $c->surname;
           $this->other = $c->other;
           $this->choices = $c->choices;
       }
   }

Y por aquí eh lo que es el valor y lo recibimos desde acá mediante el Mode tal cual hemos hecho anteriomente y poco más que decir entonces por más que sea aquí mantuve la dualidad entonces o lo recibo por acá llamo al paren ID cosa que puedas hacer perfectamente ya que a la final es un método para que haga su trabajo lo recibes mediante el evento en caso de que exista Pero bueno ya sabemos que no va a funcionar eh detallito también importante que se me haya faltado decirte Aquí también puedes colocar los nombres de los parámetros aquí por ejemplo coloqué ID y también funcionaría correctamente ya que es el nombre del parámetro que tengo al menos aquí definido claro aquí tiene que ser todos iguales todos los hijos tienen que tener el mismo nombre del parámetro si no lo dejas así sin definirle un nombre y lo recibiría es por posición bien Vamos al último paso que es otra vez el de enviarle el parámetro esto otra vez no tiene nada de raro y aquí vas a ver que lo va a recibir otra vez recuerda que aquí lo estoy imprimiendo y lo importante es que llegue entonces regresamos Aquí voy a crear ya como el 48 creo voy a persona coloco o cualquier cosa y aquí lo podemos ver así que finalmente tenemos el bendito identificador y con lo cual podemos hacer cualquier cosa con él ya en este punto voy a quitar esto para que no haga ruido que en este caso con este paren ID lo único que hacemos es la parte de la creación Bueno aparte de buscarlo la parte de la creación y actualización tal cual puedes ver entonces pues nada eso era todo lo que te quería comentar por acá son varias cositas ya a partir de este punto te pediría que hagas las mismas pras que dice yo y tú mismo sacas tus conclusiones y sepas exactamente cómo funciona y cualquier duda puedes retroceder un poquito el video y ver otra vez la explicación y sin más que decir vamos a la siguiente clase.

05-10-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Laravel Livewire Eventos del padre al hijo y uso de parámetros