All right, it's time for the big one slots. This is a feature that I have been dragging my feet on for years. I know that we need 'em in live wire, we have 'em in blade components. They're extremely useful. I've needed them in the past and we didn't have 'em. And the reason is, is because a live wire component is a lot more complicated than a blade component.

because a live wire component is a lot more complicated than a blade component. It has a whole life cycle of its own of server client communication where slots just don't become as easy as you'd think. But we knew that it was table stakes for V four, so we sat down and we cracked it and I'm really excited about it. So let me show you the most hello world kind of slot usage in Livewire.

So let me show you the most hello world kind of slot usage in Livewire. Now you have these child components, these card nested child components. You can just pass stuff in now, just like it was a blade component. So diviv, hello world. Okay. And then you close up your tag, and then somewhere inside that nested component, you echo out a slot.

and then somewhere inside that nested component, you echo out a slot. No different than a blade component. And take a look at the page. There we go. They all say hello world. So that's as far as you need to even know for basic usage. And we can just leave it at that. We have slots. It took two seconds to demo, but when I was like building it and demonstrating it, I was having a hard time coming up with actual good use cases for slots

and demonstrating it, I was having a hard time coming up with actual good use cases for slots beyond simple things like when are they really, really powerful? When do you really need them in the real world? And there's honestly no other option. And I think I found a really good one. And we're gonna build it out right here in full form so that you can see, so you can feel the need for something like a slot, and then we'll implement it.

that you can see, so you can feel the need for something like a slot, and then we'll implement it. Okay? So this page right here, what I want to introduce is little check boxes in here so that I can like do a, a bulk selection and then bulk actions at the top, like maybe delete, so I could select five of them and then hit delete and all five would get deleted. So let's build that first. In the, the data. I want something like public selected equals an empty array.

So let's build that first. In the, the data. I want something like public selected equals an empty array. And this is in the parent component, and it's gonna be filled up with all the selected post IDs. Okay? And then down here we want to delete selected methods. So let's just build that out. I'm gonna say where in, and we're gonna say ID this selected. So we're doing a little query that's saying, get all of the posts with the ID from that array of selected IDs.

So we're doing a little query that's saying, get all of the posts with the ID from that array of selected IDs. And then we're just gonna call, uh, we're just gonna call delete. And in reality, you should authorize this stuff better than I am right now 'cause posts probably belong to users and you need to make sure that the ones you're about to delete, the user owns. But we're gonna keep it simple.

to delete, the user owns. But we're gonna keep it simple. And then at the end of that, we'll set selected to an empty array to clear the selection. Okay, so now we need a little interface for it. Well, first we need check boxes. So maybe we add those. I'm gonna do this in a really weird kind of silly way right now. I'm gonna say flux checkbox, and let's just see it on the page.

I'm gonna say flux checkbox, and let's just see it on the page. Okay? So there's all the check boxes, but we wanna wire model up that checkbox. So wire model, I'm gonna make it.live so that every time you click a checkbox, it refreshes that component. So we can do stuff. So wire model.live selected, and then this is just gonna add, uh, the IDs of the post into that array.

and then this is just gonna add, uh, the IDs of the post into that array. But we need to know the id. So let's bind the value. We'll say Post id. Okay? Now when I click these, it should all be working, but we're not showing anything. Like why don't we show some bulk apps actions up here if there's any checkbox selected. So let's do that. I'm gonna go in here and use a snippet selected.

So let's do that. I'm gonna go in here and use a snippet selected. And this just says, if the count of the selected array is more than zero, show a little bit that says how many are selected, and then a big button that says delete that fires that delete selected method that we implemented a minute ago. And now I click this and check it out, one selected, two selected, three selected,

And now I click this and check it out, one selected, two selected, three selected, and if I delete all these, bam, they go away. Perfect. Okay, so none of that is slot specific at all. Here's where the slots become really powerful. I want this checkbox to live inside of this card. However, I want all the functionality related to the checkbox to be in the parent main component. And this is where nesting components in live wire, you, you encounter a little bit of friction,

And this is where nesting components in live wire, you, you encounter a little bit of friction, like maybe you put the checkbox in the child and you dispatch some event that says, Hey, I'm now selected. Or there's deeper things like modelable and that's just, I don't know, too much slots are perfect for this. So check it out. Let's do this. We can take this checkbox

So check it out. Let's do this. We can take this checkbox and instead of rendering it up there, we're gonna put it inside the slot and let's get rid of this wrapping diviv. Okay? So now it is showing inside the component, but we're echoing slot up here, and that doesn't really make a lot of sense. So we can put the slot down here. Okay? And now it's rendered kind of nicely on the right side. It looks great. Uh,

And now it's rendered kind of nicely on the right side. It looks great. Uh, one more th well, let's just test it first. So I hit delete and those two go away. Pretty cool. Uh, this is the default slot, so I'm just passing something in an echoing slot. In a case like this, I find that you want to use a named slot because it's a very specific like slot, a very specific place in the child component that you want this thing to render.

a very specific place in the child component that you want this thing to render. So you could make a name slot called actions or even just checkbox. So let's make one called checkbox. So we can do that like this live wire slot name equals checkbox. And now inside this checkbox slot, we just throw the checkbox. Now we refresh.

we just throw the checkbox. Now we refresh. That is gone because it's not the default slot, it's a named slot. Now everything so far has felt pretty much exactly like slots in blade components except for this because in a blade component it's like X slot or something. That's what it is. Well, it's live wire slot to kind of, so that you can clearly see that it's a live wire slot. But over here, a named slot in a blade component

that you can clearly see that it's a live wire slot. But over here, a named slot in a blade component comes through as a prop. So you have something like this in your blade component, and then inside of here you would say checkbox for the checkbox slot. And then down here you could just echo checkbox. Well, live wire components. This is where it gets tricky because it's not a blade component.

This is where it gets tricky because it's not a blade component. You don't have a simple props array. Maybe it's a property, whatever. So this is what I ended up doing that I actually like a lot, arguably better than the blade component syntax, no offense to blade. Um, here's what what we're doing, you just slots. And then you can either get, or you can access it as an array even.

And then you can either get, or you can access it as an array even. So you could just say slots, checkbox. And there you go. You have it. And this is nice because there's a few extra methods on this slots object. So you could say like, if slots has checkbox box, then render a diviv and put the checkbox slot inside of it. And if down here, and that feels really, really good to me. It's like only render this div if there is a slot called checkbox.

It's like only render this div if there is a slot called checkbox. And then put the actual checkbox slot in right there. So now we have name slots, we refresh and everything looks good and it still works and it's perfect. And you might be thinking, why, why did Caleb talk about how complicated slots are in live wire? And you, this point may not even land for you very well, but I just want you to see it.

And you, this point may not even land for you very well, but I just want you to see it. The real power here is that this checkbox is being rendered inside of this child component, but wire model is pointing to the parent component. So if I were to like take a weekend and just build slots in live wire, I immediately ran into these problems where it's like, now wait a minute. So selected exists here.

where it's like, now wait a minute. So selected exists here. Wire model, because it's in this child component, is automatically, automatically gonna be looking for a property called selected inside the child component. So we were smart about it and we made sure that when you're inside of a slot, of course you can use the PHP of the parent component. You could do something like echo post id, let's just see if this works.

You could do something like echo post id, let's just see if this works. Yeah, you can see the post ID right there. Um, but you can also, any wire model, wire, whatever, wire click, anything like that is going to point to the parent component because that's where the slot lives. And that's why slots are powerful because you can take something from a parent and kind of teleport it into a child where it will live, but it will really belong to the parent.

and kind of teleport it into a child where it will live, but it will really belong to the parent. So I'm really excited about it. Uh, it's really performant. Um, after we hit delete and then it clears all those selected, that's actually a really powerful thing that's happening. We didn't refresh any of these child components. No request got sent to the server. It's all the parent component that has these little tentacles inside of those children.

It's all the parent component that has these little tentacles inside of those children. I'm really pumped about it. Those are slots.