Getting components talking to each other: Learn Livewire

00:17

your components and then start to communicate via events. This just means that we can keep everything nice and tidy in our own components, and you should really only do this if you need to, but this is going to be a good example. So let's head over to our book index, and we know that at the moment, as well as showing all of these items, we also have this form,

00:38

so it's kind of two different things that we're doing within this one index component, which isn't always great. So what I'm going to do is I'm going to get rid of all of this wrapper, take it out of here, and of course, we can now get rid of this space y here, and I'm going to put this code into a new component. So obviously, we've got a little

00:58

bit of work to do to separate this out, and then we'll add our events. So let's create out a new component here with Livewire, and we're going to make a create book component or book create, however you want to name this, it doesn't really matter. So create book, if we just head over to the template, first of all, is going to be responsible for showing the form and just the

01:21

form, and then of course, going ahead and actually submitting the book. So let me get rid of that markup here, we've got our form. So we're going to need to move everything over from our book index, like this submit method and this book form over into there now. So now we have a component that's just responsible for showing our books, and then we have our new create book component,

01:44

if we just open that up, that's responsible for creating the book. So let's paste this in, move that over, make sure we bring the book form into here, and there we go. So now obviously, that's just going to disappear because we haven't added this to the page, but we can add this component anywhere now. So for example, we could add this above that component. So create book,

02:06

we now have a separate form, and then a separate component, which lists out our books. There we go. Okay, so I'm just going to go ahead and apply some spacing between these two elements now really quickly. So we'll bring back that space y of two. And there we go. Let's go ahead and add a book and see what happens. So I'm going to go ahead and type another book by Mabel, maybe hit

02:31

submit. And that is loading. So we have that artificial delay on there. And that has actually been created in the database. But because we don't have this form now within the same component as our render method for our list of books, it's not re rendering this. So if I give the page a refresh, sure enough, we see that other book. But now what we want to do is bring events in. So when

02:54

we do create a book within this component, we let this component know that a book has been created. Now what we're going to do in this episode, specifically with this event is just refresh this component, we're just going to reload the list of books. But if you were working with events in another context, you could maybe push something to a collection of books, whatever you wanted to

03:16

do. But let's take this one step at a time. Okay, so our create book component, as we know, validates sleeps, which we can kind of get rid of just temporarily, and then goes ahead and creates the book via the form. What we can do down here now is let this component know that book has been created. So let's go and say this dispatch. And we're going to say book dot created now I tend to

03:42

use dot notation for events, but you don't have to you can use hyphens if you wanted to. But I like to keep these sorts separate by using the overall thing that's happening and then the event that has happened. Okay, so we're dispatching an event now. Now what we can do is over in our book index, we can listen to this event and re render this list of books. So let's go ahead and do this

04:04

with a method first of all, and we'll see what happens. And then we'll look at a slightly different way that we can do this. So let's go ahead and create out a method in here. And we'll just call this book created. So this is what is going to happen when a book is created. And we can bring in our event listener now and we can say on and then in here book dot created. So when a book is

04:26

created from this component, and we've dispatched that and let our components know we're listening here and then doing something in here. Now we don't actually need to do anything in here because as you'll see, when this event rolls in, and we invoke this method, we already know that within Livewire when we invoke a method within a component, render is automatically called again, and it will

04:46

re render what we have on the page. So this will work. But then this is kind of a redundant method. So I'll show you how to get rid of that in a second. Let's try again. So a book by Mabel. And now when we submit this, we dispatch that event. In the component here, we're listening for that event. And then we're just calling a method. And as you can see, that refreshes the list of books.

05:09

Great. So this is really helpful if you wanted to actually send some data down here. Let's take a look at that first. So let's go over here and say book created. Well, what book has been created? Maybe we want to know the ID of the book that's been created. So we can show a message with the title of the book and all that kind of stuff. What we can do is when we create this book via

05:29

this book form, and let's open that book form up, maybe we want to return the book that's been created. So let's assign this book here, and then go ahead and return that book. So when we invoke this create method over on our book form, we actually get the book back now that we've created. What we can then do is go ahead and assign that here. And that will be the book that's been

05:51

created. So let's die dump on that book just to make sure that's coming through. So a book by Alex, submit, and there we go. We get that book that has been created. What we can now do, though, is we can take this, and we can actually pass data through to our events. Now, there's a couple of different ways that you could do this. If you wanted to pass an array in with lots of different

06:14

things, you can do that. So you can give loads of different keys. Or what you can do is just separate these out and spread them out. So for example, I could say book ID. Now, this will now be available in any of the methods that we're hooking into when we listen to that event. So for example, we're passing just the ID down. Over in our book index, we can now accept this

06:36

into here as the book ID. And then we could do something with it. So we could show a message here to say that this particular book has been added, whatever we wanted to do. We're not going to do that just yet. We'll leave that till later. But let's just die dump the book ID out and just see that this is working. So if we come over here and say another book by Mabel, hit submit, there we go.

06:57

We get the ID out. So we can pass as many arguments as we want through when we actually dispatch. So you can either comma separate these and have lots of different arguments, or you could give an array if you wanted to pass a more complex object down as an array and do something with it. It's pretty flexible, this method, so you can do whatever you need.

07:18

OK, so we're not going to be doing that because we don't really need to give the book ID here because we're not pushing this on. But at least now we're getting this returned if we do. So over in our book index, this book created method is pretty much redundant, like I said a moment ago. So another option that we can do here if we just wanted to listen to an event and

07:37

refresh this render method is call the magic refresh method. So how does this work? Well, I'm going to go ahead and comment this out because this isn't what we need anymore. I'm going to do this up here instead with a listeners property. So this is another way that you can listen to things. So for example, if we didn't want to use an attribute, what we could do

07:58

is define out a listeners array in here as a property. And then we could listen to a specific event. So that is book.created. And then here what we could do is define which method we want to call. So we could say that we want to call the book created method when this event rolls in. This is the same functionality as adding in the attribute. It works in exactly the same way.

08:22

So you can see here when I add a book, of course, if we actually get rid of the expected integer that we need in there. So let's try that one more time. Another book. And let's hit submit. And you can see it just works in exactly the same way. But we don't really want to have this method in here. It's kind of redundant. So let's go and just comment this back

08:42

out. And instead, if we just wanted to refresh this component, we can call the magic refresh method. And we know that it's magic because it's prefixed with a dollar sign just in here. So what we're saying now is when we create a book from our form, just refresh this component. Because all we're doing here is just rendering out a list of books. So really,

09:03

that's all we need to do. So let's go over and just try this out. And then we're pretty much done. We're going to look at events throughout the course. So we'll see some other examples. But let's just check that this works. Hit submit. And sure enough, that component gets refreshed using that magic refresh method.

Sign up to access "Learn Livewire" right now.

Episodes

Transcript

Episode summary

Episode discussion