Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

wuyidebh's avatar

how to use dispatch event to pass parameters to multiple livewire component?

Hi everyone, in my custom page i have make an action in form to triggle a dispatch event, and pass parameters to multiple components which included in current custom page to reflesh them, but only the last component works and the other components show blank,So how to make all components receive the parameters and re-render work?This is my code

#Custom Page

public function form(Form $form): Form
{
    return $form
        ->schema([
            //...
            Actions::make([
                Action::make('GO')
                    ->action(
                        function () {
                            $this->dispatch('updateData', minvalue: 9, mincopyvalue: 25);
                        }
                    )
            ]),
            Tabs::make('Tabs')
                ->tabs([
                    Tab::make('Tab 1')
                        ->schema([
                            Livewire::make(Testtest::class),
                            Livewire::make(Testtestcopy::class)
                        ]),
                    Tab::make('Tab 2')
                        ->schema([
                            //...
                        ])

                ]),
        ]);
}

#Testtest

namespace App\Livewire;
use Livewire\Attributes\On;
use Livewire\Component;

class Testtest extends Component
{

    public $min = null;

    #[On('updateData')]

    public function loadData($minvalue)
    {
        $this->min = $minvalue;
    }

    public function render()
    {
        return view('livewire.testtest', [
            'min' => $this->min,
        ]);
    }
}

Blade

<div>
     restult is {{ $min }}
</div>

#Testtestcopy

namespace App\Livewire;
use Livewire\Attributes\On;
use Livewire\Component;

class Testtestcopy extends Component
{

    public $mincopy = null;

    #[On('updateData')]

    public function loadData($mincopyvalue)
    {
        $this->mincopy = $mincopyvalue;
    }

    public function render()
    {
        return view('livewire.testtestcopy', [
            'mincopy' => $this->mincopy,
        ]);
    }
}

Blade

<div>
     restult is {{ $mincopy }}
</div>

Initial show

result is
result is

After click, show

result is 25

Also try

$this->dispatch('updateData1', minvalue: 9)->to(Testtest::class);
$this->dispatch('updateData2', mincopyvalue: 25)->to(Testtestcopy::class);

but the same problem

0 likes
1 reply
wuyidebh's avatar

Finally solve! Not the problem of dispatch, just because the two components has the same wire:id, so the latest component's content will override the previous one. So just add key() to every component when inject them to form , that will be work.

Livewire::make(Testtest::class)->key('Testtest'),
Livewire::make(Testtestcopy::class)->key('Testtestcopy'),

Please or to participate in this conversation.