I think we've outlived the usefulness of the coffee plan picker example. view, stripped basically everything out of it, and now we're just working with a new fancy button component. I created that in the components directory, and it is nothing but a template with a button that says click me. js called slots.
Slots enable us to pass data from the parent to the child, much like props, with one very important addition. That is, we're now able to pass down HTML as well. Let me show you how that works. So here inside the fancy button, the way we pass data to a slot is by putting that content between the closing and end tags of the component.
So here I could say something like, submit instead of click me. Now I'll save this. but nothing changes in the browser. That's because we need to tell the fancy button where we should display the content provided for the slot.
The way we do that is by using the special slot element. Now this says put whatever is put inside of the slot, put it right here in between these button tags. Now I could provide any other markup inside of this example as well. I could even include the slot somewhere outside of the button.
So this gives us full control over where the content for that slot appears. For our button though, it really makes the most sense just to have it appear directly inside of the button with nothing wrapping it. This is really cool, but we could have accomplished the same thing with a prop. What is the difference?
Well now, let's say I want to pass some custom markup, some custom HTML as well. Let's add a strong tag in here and then just make the S bold. That totally works. You cannot pass HTML inside of prompts unless you end up using VHTML, which there are some sticky things that go along with that.
So if you need to pass HTML from a parent to a child, slots are the way to go. We could also provide default content to a slot. We just do that by providing the content between the two slot tags. So if the developer decides to use this fancy button without providing anything in between them, the default content shows.
I'll just put the custom content back. And now let me show you another really cool feature of slots. That is, we could have more than one. What if I added another slot right here inside a button?
Save. And now you can see I've actually got the default slot showing twice. So we've got that content, submit, submit, one after the other. This usually isn't very useful.
Instead, what we want to do is provide another set of content to go in here. So we need to provide a name on this slot. Let's say we want to always have some kind of icon at the beginning of the button. So I'll call this slot icon.
Now we don't have anything provided in the parent for the icon slot so nothing appears So how do I provide that new content? Well, we can specify a name slot with a template tag and the V slot directive With the name of the slot as the argument. So this says whatever I have in here Put this inside of this slot right here. We can do the same then for the default slot, just like this, or we could leave off this altogether and still just leave our default content at the root of the component here.
Okay, so let's actually throw something inside of the icon slot now. I'll just use an emoji. What about a waving hand? Why not?
And yeah, now we have exactly that inside of the button. I could also provide a default value for this name slot. as well. So what about an arrow?
Something like this here, and then if we don't provide any named slot for the icon, the arrow appears. Let's add the custom icon back, and then I'll show you the shorthand here for vslot, which is a pound sign. So that works exactly the same as spelling out the full vslot. To give you a little bit better of an idea of what name slots might be good for, let's quickly take a look at this example in the official docs.
So here we have a layout that includes a header, some main content, and a footer. Well, we could use slots, name slots, to dynamically put things within each section. And then using this layout component would look something like this. You create the header content in the header slot, the default or the main content in the default slot, and the footer content here in the footer slot.
Finally, let's say there was some kind of state inside of the fancy button component. Something like hovered equals ref true. I'll import ref from view, and then we'll just say whenever there is a mouse enter of over the button, we'll set hover to true. And then whenever we mouse, leave again, we'll set hover to false.
Awesome. So let me just ensure that is working by printing out hover below the button and refresh the page. Oh, it should default to false by default. And now when I hover, it becomes true.
When I leave, it becomes false again. Perfect. Let's say we want this local state available within the slot of the parent. in order to figure out something inside of this template.
Maybe we want to change the hand wave on hover to some other icon. Well, I can do that by providing the local state as a prop to the slot. view inside of my template icon here, so my icon slot, I'll continue printing out the hand. But now I want to extract all of the slot prompts by giving the the v-slot a value So basically this is everything passed down into this slot right here right now We're only passing one thing that is hover, but we could pass as many other things as we'd like as well.
So Random equals hello. So let's go back here and let's just print out the slot props just like this Right so now inside of our our button inside of the icon slot we have hover hover and Random hello, so it's an object of all of the props pass to the slot now hover here is not true or false Because I forgot to bind it to make it actually refer to the real hover I'll hit save and now hover is false when I move over anything and the the button we do get hover true when I move out it is false again this is perfect so a lot of times what you'll see is people actually destructure your different props here so I only want access to hover I don't care about random so I'll just grab just hover here by using the curly braces around it and then let's say if the button is being hovered over then we'll have the wave icon again Otherwise, we can do maybe this flexing muscle. And let's see what that looks like. So now I have a flexing muscle.
When I hover over it, we get the wave. This syntax right here is called scope slots and basically gives the parent component access to the data in the scope of the child component. This is a super, super powerful feature that you'll probably end up using quite often. In summary, slots are a very powerful way to pass content from parent to child, and then even pass state from child back to parent within the context of that slot.
If you ever need to pass HTML down into a child element, slots are the way to go. I think we've outlived the usefulness of the coffee plan picker example. view, stripped basically everything out of it, and now we're just working with a new fancy button component. I created that in the components directory, and it is nothing but a template with a button that says click me.
js called slots. Slots enable us to pass data from the parent to the child, much like props, with one very important addition. That is, we're now able to pass down HTML as well. Let me show you how that works.
So here inside the fancy button, the way we pass data to a slot is by putting that content between the closing and end tags of the component. So here I could say something like, submit instead of click me. Now I'll save this. but nothing changes in the browser.
That's because we need to tell the fancy button where we should display the content provided for the slot. The way we do that is by using the special slot element. Now this says put whatever is put inside of the slot, put it right here in between these button tags. Now I could provide any other markup inside of this example as well.
I could even include the slot somewhere outside of the button. So this gives us full control over where the content for that slot appears. For our button though, it really makes the most sense just to have it appear directly inside of the button with nothing wrapping it. This is really cool, but we could have accomplished the same thing with a prop.
What is the difference? Well now, let's say I want to pass some custom markup, some custom HTML as well. Let's add a strong tag in here and then just make the S bold. That totally works.
You cannot pass HTML inside of prompts unless you end up using VHTML, which there are some sticky things that go along with that. So if you need to pass HTML from a parent to a child, slots are the way to go. We could also provide default content to a slot. We just do that by providing the content between the two slot tags.
So if the developer decides to use this fancy button without providing anything in between them, the default content shows. I'll just put the custom content back. And now let me show you another really cool feature of slots. That is, we could have more than one.
What if I added another slot right here inside a button? Save. And now you can see I've actually got the default slot showing twice. So we've got that content, submit, submit, one after the other.
This usually isn't very useful. Instead, what we want to do is provide another set of content to go in here. So we need to provide a name on this slot. Let's say we want to always have some kind of icon at the beginning of the button.
So I'll call this slot icon. Now we don't have anything provided in the parent for the icon slot so nothing appears So how do I provide that new content? Well, we can specify a name slot with a template tag and the V slot directive With the name of the slot as the argument. So this says whatever I have in here Put this inside of this slot right here.
We can do the same then for the default slot, just like this, or we could leave off this altogether and still just leave our default content at the root of the component here. Okay, so let's actually throw something inside of the icon slot now. I'll just use an emoji. What about a waving hand?
Why not? And yeah, now we have exactly that inside of the button. I could also provide a default value for this name slot. as well.
So what about an arrow? Something like this here, and then if we don't provide any named slot for the icon, the arrow appears. Let's add the custom icon back, and then I'll show you the shorthand here for vslot, which is a pound sign. So that works exactly the same as spelling out the full vslot.
To give you a little bit better of an idea of what name slots might be good for, let's quickly take a look at this example in the official docs. So here we have a layout that includes a header, some main content, and a footer. Well, we could use slots, name slots, to dynamically put things within each section. And then using this layout component would look something like this.
You create the header content in the header slot, the default or the main content in the default slot, and the footer content here in the footer slot. Finally, let's say there was some kind of state inside of the fancy button component. Something like hovered equals ref true. I'll import ref from view, and then we'll just say whenever there is a mouse enter of over the button, we'll set hover to true.
And then whenever we mouse, leave again, we'll set hover to false. Awesome. So let me just ensure that is working by printing out hover below the button and refresh the page. Oh, it should default to false by default.
And now when I hover, it becomes true. When I leave, it becomes false again. Perfect. Let's say we want this local state available within the slot of the parent.
in order to figure out something inside of this template. Maybe we want to change the hand wave on hover to some other icon. Well, I can do that by providing the local state as a prop to the slot. view inside of my template icon here, so my icon slot, I'll continue printing out the hand.
But now I want to extract all of the slot prompts by giving the the v-slot a value So basically this is everything passed down into this slot right here right now We're only passing one thing that is hover, but we could pass as many other things as we'd like as well. So Random equals hello. So let's go back here and let's just print out the slot props just like this Right so now inside of our our button inside of the icon slot we have hover hover and Random hello, so it's an object of all of the props pass to the slot now hover here is not true or false Because I forgot to bind it to make it actually refer to the real hover I'll hit save and now hover is false when I move over anything and the the button we do get hover true when I move out it is false again this is perfect so a lot of times what you'll see is people actually destructure your different props here so I only want access to hover I don't care about random so I'll just grab just hover here by using the curly braces around it and then let's say if the button is being hovered over then we'll have the wave icon again Otherwise, we can do maybe this flexing muscle. And let's see what that looks like.
So now I have a flexing muscle. When I hover over it, we get the wave. This syntax right here is called scope slots and basically gives the parent component access to the data in the scope of the child component. This is a super, super powerful feature that you'll probably end up using quite often.
In summary, slots are a very powerful way to pass content from parent to child, and then even pass state from child back to parent within the context of that slot. If you ever need to pass HTML down into a child element, slots are the way to go.