Event and listeners in livewire

 Now are gonna see events and listeners in livewire and see how they work in livewire.

We can fire events 

1. In the view

2. In the component

3. In javascript

Now i want to emit a global event.

So there are four ways to emit.

1. $this->emit() this is Global.

2. $this->emitup() child to parent.

3. $this->emitSelf() emit an event to self in the current component.

4. $this->emitTo() emit event to specific livewire component.

e.g: $this->emitTo(UserDetails,'parameter');

In the View

<h3>Emit Browser Event</h3>

<button wire:click="$emit('openStore')" class="btn btn-primary btn-md my-2 mx-2">Emit Event</button>

In javascript

<!-- livewire Events -->

<script>

   window.addEventListener('openTheShop', event => {

       Livewire.emit('openStore');

   });

</script>

     

Most of the time we use javascript events to show alert and toast messages as well. 

We can global event on javascript now.

In livewire version 1

document.addEventListener('livewire:load', () => {

    window.livewire.on('postAdded', postId => {

        alert('A post was added with the id of: ' + postId);

    })

});