# Events

• Dispatching Events
  • Dispatching to a specific component
• Registering event listeners
• Refreshing Techniques
  • Refreshing a List of Items After an Action Has Been Performed

# Dispatching Events

$this->dispatch('eventName', key: value);

# Dispatching to a specific component

$this->dispatch('open-modal')->to(NewUserModal::class);

# Registering event listeners

protected $listeners = ['event-name' => 'method'];

use Livewire\Attributes\On;

#[On('event-name')]
public function doStuff() { }

# Refreshing Techniques

# Refreshing a List of Items After an Action Has Been Performed

https://livewire.laravel.com/docs/events#listening-for-events-from-specific-child-components

When using separate Livewire components, the parent component (which contains the list or table) won’t automatically know when a child component performs an action, like deleting an item. To notify the parent component and refresh the list, you need to dispatch an event from the child component and listen for it in the parent component.

The listener can be registered in the parent component using the $listeners property or the On attribute or directly in the view using the @event directive.

// Child Component
public function delete($id) {
    Item::find($id)->delete();
    $this->dispatch('deleted');
}

// Parent Component View
<livewire:child-component @deleted="$refresh"/>

Steps to Refresh the List:

1. In the child component, dispatch an event after performing the action (e.g., deleting an item).
2. In the parent components view, register the event listener using the @event directive.
3. When the event is dispatched, the parent component will automatically refresh the list.