Pasar informacion de componente a otro en Livewire

En Livewire hay varias maneras de pasar información de un componente a otro. Lo más común es utilizando eventos.

Este sería un ejemplo para demostrar los mecanismos de paso de mensajes por eventos.

1.- Definición de los componentes

Imaginemos que tenemos dos componentes. vamos a hacer algo simple... Sería ComponenteA y ComponenteB. ç

Entonces vamos a pasar información del ComponenteA al ComponenteB.

Componente A que podrá estar en: resources/views/livewire/componente-a.blade.php

<div>
    <button wire:click="enviarInfo">Enviar información a Componente B</button>
</div>

Y la implementación en la clase del archivo app/Http/Livewire/ComponenteA.php

namespace App\Http\Livewire;

use Livewire\Component;

class ComponenteA extends Component
{
    public function enviarInfo()
    {
        $informacion = "Hola desde Componente A!";
        $this->emit('info. recibida:', $informacion);
    }

    public function render()
    {
        return view('livewire.componente-a');
    }
}

Ahora el componente Componente B que está en la vista: resources/views/livewire/componente-b.blade.php

<div>
    Soy el componente B. <br><br>Información desde Componente A: {{ $informacion }}
</div>

La implementación la tendríamos en la clase app/Http/Livewire/ComponenteB.php

namespace App\Http\Livewire;

use Livewire\Component;

class ComponenteB extends Component
{
    public $informacion = '';

    protected $listeners = ['infoRecibida' => 'actualizarInfo'];

    public function actualizarInfo($data)
    {
        $this->informacion = $data;
    }

    public function render()
    {
        return view('livewire.componente-b');
    }
}

2.- Uso de los componentes en una vista

Ahora supongamos que queremos usar ambos componentes en una vista, la misma que te viene de casa welcome.blade.php. que estaría en el archivo resources/views/welcome.blade.php

<div>
    <livewire:componente-a />
    <livewire:componente-b />
</div>

recuerda que tienes que haber enlazado los correspondientes scripts. Creo que eso lo tienes expliado en esta página de livewire.

3.- Flujo de ejecución

Con esto ya lo tendrías. Ahora vamos a repasar brevemente el flujo de ejecución de este sencillo ejemplo.

• Cuando haces clic en el botón de ComponenteA, se ejecuta la función enviarInfo.
• Esta función emite un evento llamado infoRecibida con la información que deseamos pasar.
• ComponenteB está escuchando ese evento, y cuando lo recibe, ejecuta su función actualizarInfo para actualizar su propiedad $informacion.
• Finalmente, la vista de ComponenteB se actualiza mostrando la información recibida.

Espero que te sirva, ya me cuentas.

Como sugerencia, en ciertos escenarios puede que te interese investigar también sobre los Componentes Anidados (Nested Components), ya que puedes pasar datos a componentes anidados directamente a través de sus parámetros.