How to refresh one Livewire component from another component

January 24, 2021

Sometimes you want to refresh one Livewire component in response to changes in a separate Livewire component.

For example, some data you've edited and saved in the first component needs to be shown in the second component.

For this, you can use Livewire's events system. First, define the listeners on the Livewire component you want to refresh remotely, so that sending an event called refreshComponent will call Livewire's magic $refresh method.

protected $listeners = ['refreshComponent' => '$refresh'];

Now, in the other component, we just have to send an event called refreshComponent to this component.

$this->emitTo('component-to-refresh', 'refreshComponent')

This event will be sent to the component called component-to-refresh, and component-to-refresh will reload its contents.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!