Sign up to access "Learn Livewire" right now.

or we can even dispatch and listen for events on the client side as well. That means that we can basically get our components talking to each other, whether we trigger these

from our LiveWire components, or whether we just trigger these from within JavaScript. Now, we're going to take this episode just to take a look at some event basics.

So we've got a really good understanding of how these work. And then we're going to tie this into the application that we're building by separating out

our form into a new component so we can listen within our main component and refresh this list of books. So let's go and just create out a really simple example

component here. And let's use LiveWire make. And we'll create out a event example component. OK, so we've already seen that.

I'm going to head straight over to the dashboard. I'm just going to put this directly in here. So let's say LiveWire event example. OK, so the basics of events is that we dispatch

and we listen to events. So let's go and just open up our event example component here. And I'm going to go ahead and create a button just to dispatch an event.

Now, with this button, we're going to go ahead and call a method. So we're going to say, when we click on this, let's just call this dispatch some event.

And then we can, of course, go ahead and create this over in this event example. So let's create that method out in here. And there we go.

Now, to dispatch an event, we just use this dispatch. That's pretty much all we need to do. So what this will do is it will dispatch an event. And we can potentially listen to the event

that we've dispatched from any of our components or, like I mentioned before, on the client side. Now, this takes in, at minimum, an event name. So let's just say example event.

And that's pretty much it. So if we head over to here and click Dispatch Event, nothing has really happened because we're not listening to this event anywhere.

Eventually, this event will be something like a book has been created. So it might be book.created or book-created. Now, how do we listen to this event?

Well, let's just listen to this directly within this component. And then we'll look at listening to this from another component. So what I'm going to do is create our method.

First of all, that's the fundamental thing that we need to do, create a method that's going to perform an action when this event happens. So let's go and create a method, do something in here.

So I want this to happen. So we'll just say something. I want this to happen when this is dispatched. How do we do this?

Well, again, we're going to bring in attributes here. There's a couple of ways to do this in LiveWire, but it's much more convenient to do this with attributes. So we're going to go ahead and bring in a PHP attribute here.

And we're going to use the on attribute from LiveWire. See, this comes from LiveWire attributes. So we go ahead and we use this attribute. And then in here, you probably guessed, and as you can see,

we give the event name. So that is example-event. So let's go ahead and say example-event. So that is pretty much it.

We've set up a kind of communication here. When we click on a button, which calls this method, we dispatch an event, and we're listening for this event inside of here.

So let's try this out. Let's go over, hit Dispatch Event, and there we go. So what's happened here is that event's been dispatched, that has listened, and it has done something.

So how is this kind of thing useful? Well, it's useful when you have multiple components, but you need them to listen to what other components are doing.

So let's look at our example here. If we were to separate this form out into a completely new component, which would be a good idea to keep it nice and separate

from anything else we have, once we've created that book, what we can then do is dispatch an event to tell this component that a new book has been created. What that then means is we could just

refresh this list of books once we know that a new book has been created. We could flash a message somewhere if we wanted to. There's a bunch of different things that we can do,

and we'll be looking at an example of that later using AlpineJS. So let's go ahead and look at listening to an event from another component

just to see that this works. Then I'm just going to tinker around in the browser console just to show you this, and then we should pretty much be wrapped up with the basics of events.

So I'm going to take this event listener that we've implemented here, and I'm going to move this over to another component. It doesn't matter which component it is.

All components, as long as you apply this listener, will actually listen for this event. So we're dispatching this event from this event example component.

Let's add this to our book index. I'm just going to put this method directly in here. And of course, just make sure we put in the on attribute just over here.

OK, so this completely separate component is now listening for this event, and we shouldn't see any difference whatsoever. So if I click on this, there we go.

So component communication between each other by events. That's pretty much what we need to know. So I'm going to go ahead and get rid of this here and put it back into our example event

just so we've got it as a reference. And now that we've grasped the basics of events, let's take a look at this from the client side. So we know that when we click on this button,

that goes ahead and dispatches that event, and we have a method that's listening for that event. But we can actually do this from the client side as well. Remember that Alpine is being used with Livewire,

and also Livewire has a global object. So what we can do is if we were to create out an Alpine component on the page, we could either listen for events globally,

or we could dispatch events globally using the Livewire global object. So how do we do this? Well, let's go ahead and just type into the console

here Livewire.dispatch. And I'm going to go ahead and call this like we would within a component itself. We're not actually doing this within a PHP component.

We're doing this within JavaScript, but this is still going to work. So let's just double check what that event was called, example event.

So I'm going to go ahead and say example event. And when I go ahead and run this code, our components are still going to pick this up, despite the fact we're triggering

this from the client side. And don't worry about this 500 error. That's just because we're dying and dumping. But you can see this still works.

So events are incredibly powerful in Livewire. Basically, this means that we can just dispatch events, listen to them, and have communication between different components, both on the client side

and on the back end as well. So now that we've done this, let's head over to the next episode and get this added into a real usage for dispatching and listening to events.