Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon What are some examples of using events to trigger updates in parent components


What are some examples of using events to trigger updates in parent components


Here are some examples of using events to trigger updates in parent Livewire components:

1. Emitting Events from Child to Parent:
- In the child component, use the `$this->emit()` method to emit an event:

php
     class ChildComponent extends Component
     {
         public function someAction()
         {
             // Perform some action
             $this->emit('childActionPerformed', $data);
         }
     }
     

- In the parent component, listen for the event and handle it:
html
     <livewire:child-component wire:click="someAction" />
     

php
     class ParentComponent extends Component
     {
         protected $listeners = ['childActionPerformed'];

         public function childActionPerformed($data)
         {
             // Handle the event and update the parent's state
             $this->someParentData = $data;
         }
     }
     

2. Emitting Events to Update a Shared State Service:
- Create a Livewire component that acts as a state management service:

php
     class StateService extends Component
     {
         public $someData;

         public function updateSomeData($newData)
         {
             $this->someData = $newData;
             $this->emit('stateUpdated');
         }
     }
     

- In your parent and child components, inject the StateService and use its methods to manage the shared state:
html
     <livewire:state-service />

     <livewire:parent-component />
     <livewire:child-component />
     

php
     class ParentComponent extends Component
     {
         public function mount(StateService $stateService)
         {
             $this->stateService = $stateService;
             $this->stateService->addListener('stateUpdated', function () {
                 $this->someParentData = $this->stateService->someData;
             });
         }

         public function someAction()
         {
             $this->stateService->updateSomeData($newData);
         }
     }

     class ChildComponent extends Component
     {
         public function mount(StateService $stateService)
         {
             $this->stateService = $stateService;
         }

         public function someAction()
         {
             $this->stateService->updateSomeData($newData);
         }
     }
     

3. Emitting Events to Trigger a Refresh in the Parent:
- In the child component, emit an event to trigger a refresh in the parent:

php
     class ChildComponent extends Component
     {
         public function someAction()
         {
             // Perform some action
             $this->emit('refreshParent');
         }
     }
     

- In the parent component, listen for the `refreshParent` event and call the `$refresh` magic method:
html
     <livewire:child-component wire:click="someAction" />
     

php
     class ParentComponent extends Component
     {
         protected $listeners = ['refreshParent' => '$refresh'];
     }
     

These examples demonstrate how you can use events to communicate between parent and child Livewire components, allowing the child to trigger updates in the parent's state or trigger a full component refresh.

Citations:
[1] https://livewire.laravel.com/docs/nesting
[2] https://livewire.laravel.com/docs/javascript
[3] https://laracasts.com/discuss/channels/livewire/how-to-pickup-event-from-livewire-child-component
[4] https://laravel-livewire.com/docs/2.x/actions
[5] https://stackoverflow.com/questions/70047849/fire-an-event-from-laravel-controller-and-listen-on-livewire-component