Events

• Firing Events
  • From The Template
  • From The Component
  • From Global JavaScript
• Event Listeners
• Passing Parameters
• Scoping Events
  • Scoping To Parent Listeners
  • Scoping To Components By Name
  • Scoping To Self
• Listening For Events In JavaScript
• Dispatching Browser Events

Livewire components can communicate with each other through a global event system. As long as two Livewire components are living on the same page, they can communicate using events and listeners.

Firing Events

There are multiple ways to fire events from Livewire components.

Method A: From The Template

        
1<button wire:click="$emit('postAdded')">    

Method B: From The Component

        
1$this->emit('postAdded');    

Method C: From Global JavaScript

        
1<script>
2    Livewire.emit('postAdded')
3</script>    

Event Listeners

Event listeners are registered in the $listeners property of your Livewire components.

Listeners are a key->value pair where the key is the event to listen for, and the value is the method to call on the component.

        
 1class ShowPosts extends Component
 2{
 3    public $postCount;
 4 
 5    protected $listeners = ['postAdded' => 'incrementPostCount'];
 6 
 7    public function incrementPostCount()
 8    {
 9        $this->postCount = Post::count();
10    }
11}    

Now when any other component on the page emits a postAdded event, this component will pick it up and fire the incrementPostCount method on itself.

If you need to name event listeners dynamically, you can substitute the $listeners property for the getListeners() protected method on the component:

            
 1class ShowPosts extends Component
 2{
 3    public $postCount;
 4 
 5    protected function getListeners()
 6    {
 7        return ['postAdded' => 'incrementPostCount'];
 8    }
 9 
10    ...
11}        

Passing Parameters

You can also send parameters with an event emission.

        
1$this->emit('postAdded', $post->id);    

            
 1class ShowPosts extends Component
 2{
 3    public $postCount;
 4    public $recentlyAddedPost;
 5 
 6    protected $listeners = ['postAdded'];
 7 
 8    public function postAdded(Post $post)
 9    {
10        $this->postCount = Post::count();
11        $this->recentlyAddedPost = $post;
12    }
13}        

Scoping Events

Scoping To Parent Listeners

When dealing with nested components, sometimes you may only want to emit events to parents and not children or sibling components.

In these cases, you can use the emitUp feature:

        
1$this->emitUp('postAdded');    

        
1<button wire:click="$emitUp('postAdded')">    

Scoping To Components By Name

Sometimes you may only want to emit an event to other components of the same type.

In these cases, you can use emitTo:

        
1$this->emitTo('counter', 'postAdded');    

        
1<button wire:click="$emitTo('counter', 'postAdded')">    

(Now, if the button is clicked, the "postAdded" event will only be emitted to counter components)

Scoping To Self

Sometimes you may only want to emit an event on the component that fired the event.

In these cases, you can use emitSelf:

        
1$this->emitSelf('postAdded');    

        
1<button wire:click="$emitSelf('postAdded')">    

(Now, if the button is clicked, the "postAdded" event will only be emitted to the instance of the component that it was emitted from.)

Listening For Events In JavaScript

Livewire allows you to register event listeners in JavaScript like so:

        
1<script>
2Livewire.on('postAdded', postId => {
3    alert('A post was added with the id of: ' + postId);
4})
5</script>    

Dispatching Browser Events

Livewire allows you to fire browser window events like so:

        
1$this->dispatchBrowserEvent('name-updated', ['newName' => $value]);    

You are able to listen for this window event with JavaScript:

        
1<script>
2window.addEventListener('name-updated', event => {
3    alert('Name updated to: ' + event.detail.newName);
4})
5</script>    

AlpineJS allows you to easily listen for these window events within your HTML:

        
1<div x-data="{ open: false }" @name-updated.window="open = false">
2    <!-- Modal with a Livewire name update form -->
3</div>