So far, we've been using props to pass data to our components. There is also another way to distribute content to components. That is using slots. js.
We will cover them in depth in another course. But I do want you to be familiar with the concept. So here we will take a look at how slots work. With slots, we are able to use components like this.
So instead of passing the item to the component using props, instead, we pass the content into the element itself, just like it were normal HTML. All right, let's create the to do item component now. To get started, all we want to do is to display the content that is passed in the slot. So let's assign it a template.
Next, we'll need to create the template. as next template and give it the appropriate ID. Now in the template, in order to define a slot, we use the slot element. If we try it out now, we see the buy bananas to do in the browser.
Nice. This is pretty cool. In the components template, we can also include any elements we'd like along with the slot. So for example, we could add a checkbox before the slot.
that will toggle the status of the to do. If we try it again, we see the checkbox along with the text. Okay, let's add a data property that will hold this status. I will name it done and initialize it to false.
Now let's bind done to the checkbox. Once we do that, we can apply some styling to the to do item to make it clear when it's done. Let's create a CSS class for that and I will give it a green color and let's say a line through the text. Now what we want to do is to dynamically apply this class to the content of the slot based on the value of done.
And since the key and the value here are the same, we can actually shorten this using the object property shorthand. Okay, if we do things just like this though, and try to use the class binding on the slot element itself. It won't work. This is because when the component is rendered, the slot element is replaced with what we pass into it.
Therefore, to make it work, we can wrap the slot element inside of another element, like a span, and apply the class binding here instead. If we give it a shot now, when we mark a todo as completed, the todo item gets this sweet styling. Very nice. And since this is a typical component, we can create as many instances as we'd like, and each one will be independent.
Very nice. Notice that in the markup, we pass the content to the slot in plain text. This works fine, but you could also pass any sort of HTML that you'd like in here. For example, we could use a paragraph or even multiple elements.
Okay, sometimes you might want to use multiple slots. For instance, we might want to use another slot to display a description for the to do. We could pass both elements in the default slot. But what if we want to display them in different places?
Well, this is where named slots come into play. the slot element has a special attribute called name, which can be used to define additional slots. I will name this slot description. Now remember that whatever content we put into the to do item element will be rendered in the default slot.
So if we write the description like this, it will be rendered in this span. And when the to do is done, The description will get the same styling as the name. In order to send content to our description slot, we can use the vslot directive on a template element, providing the name of the slot as the vslots argument. If we run it now, and mark the to do as done, the description stays intact.
Nice. Also, if you like short hands like me, you could use the hash symbol instead of the slot. The slots are also very handy when you want to have control over a component's element. For instance, the to-do template could have a button that would, I don't know, highlight the to-do.
If you want to be able to customize the button text, then instead of using props, you could make the text a slot. Let's call it button text. In the markup, you will pass the button text like this. If we try this, sure enough, we get our customized button here on the first item.
This is very helpful when you want to distribute some markup to an element like font awesome. One thing to notice here, though, is that only the item that we provided the button text for has a good looking button. The others are empty. So we've essentially made our button text slot.
required. So to make the button text slot optional, we can provide a default value. This is possible by adding the default content inside the slot element. This way, if the button text is provided, it will replace the slot element.
But if it's not provided, the default content will be displayed. That's a simple feature, yes, but it's also very powerful. As you see in the browser, We now get two different buttons. Bear in mind that slots are not better than props.
Both features have pros and cons, so it really all comes down to your use case. As a rule of thumb, when you need to pass HTML or other markup to a component, slots are the way to go. When you need to pass data to a component, props are perfect. Of course, you are able to use both slots and props.
on the same component. OK, I hope this lesson wasn't too confusing. If you don't really understand the concept of slots yet, don't worry. We will cover them in depth in another course.
If you want to play around with slots though to get a better understanding now, create a page layout component that will work something like this. It'll have a slot for the header and one for the footer. Lastly, the default slot will display the page's content. Once you've tried it out, you'll find a solution in the description of the video.
So far, we've been using props to pass data to our components. There is also another way to distribute content to components. That is using slots. js.
We will cover them in depth in another course. But I do want you to be familiar with the concept. So here we will take a look at how slots work. With slots, we are able to use components like this.
So instead of passing the item to the component using props, instead, we pass the content into the element itself, just like it were normal HTML. All right, let's create the to do item component now. To get started, all we want to do is to display the content that is passed in the slot. So let's assign it a template.
Next, we'll need to create the template. as next template and give it the appropriate ID. Now in the template, in order to define a slot, we use the slot element. If we try it out now, we see the buy bananas to do in the browser.
Nice. This is pretty cool. In the components template, we can also include any elements we'd like along with the slot. So for example, we could add a checkbox before the slot.
that will toggle the status of the to do. If we try it again, we see the checkbox along with the text. Okay, let's add a data property that will hold this status. I will name it done and initialize it to false.
Now let's bind done to the checkbox. Once we do that, we can apply some styling to the to do item to make it clear when it's done. Let's create a CSS class for that and I will give it a green color and let's say a line through the text. Now what we want to do is to dynamically apply this class to the content of the slot based on the value of done.
And since the key and the value here are the same, we can actually shorten this using the object property shorthand. Okay, if we do things just like this though, and try to use the class binding on the slot element itself. It won't work. This is because when the component is rendered, the slot element is replaced with what we pass into it.
Therefore, to make it work, we can wrap the slot element inside of another element, like a span, and apply the class binding here instead. If we give it a shot now, when we mark a todo as completed, the todo item gets this sweet styling. Very nice. And since this is a typical component, we can create as many instances as we'd like, and each one will be independent.
Very nice. Notice that in the markup, we pass the content to the slot in plain text. This works fine, but you could also pass any sort of HTML that you'd like in here. For example, we could use a paragraph or even multiple elements.
Okay, sometimes you might want to use multiple slots. For instance, we might want to use another slot to display a description for the to do. We could pass both elements in the default slot. But what if we want to display them in different places?
Well, this is where named slots come into play. the slot element has a special attribute called name, which can be used to define additional slots. I will name this slot description. Now remember that whatever content we put into the to do item element will be rendered in the default slot.
So if we write the description like this, it will be rendered in this span. And when the to do is done, The description will get the same styling as the name. In order to send content to our description slot, we can use the vslot directive on a template element, providing the name of the slot as the vslots argument. If we run it now, and mark the to do as done, the description stays intact.
Nice. Also, if you like short hands like me, you could use the hash symbol instead of the slot. The slots are also very handy when you want to have control over a component's element. For instance, the to-do template could have a button that would, I don't know, highlight the to-do.
If you want to be able to customize the button text, then instead of using props, you could make the text a slot. Let's call it button text. In the markup, you will pass the button text like this. If we try this, sure enough, we get our customized button here on the first item.
This is very helpful when you want to distribute some markup to an element like font awesome. One thing to notice here, though, is that only the item that we provided the button text for has a good looking button. The others are empty. So we've essentially made our button text slot.
required. So to make the button text slot optional, we can provide a default value. This is possible by adding the default content inside the slot element. This way, if the button text is provided, it will replace the slot element.
But if it's not provided, the default content will be displayed. That's a simple feature, yes, but it's also very powerful. As you see in the browser, We now get two different buttons. Bear in mind that slots are not better than props.
Both features have pros and cons, so it really all comes down to your use case. As a rule of thumb, when you need to pass HTML or other markup to a component, slots are the way to go. When you need to pass data to a component, props are perfect. Of course, you are able to use both slots and props.
on the same component. OK, I hope this lesson wasn't too confusing. If you don't really understand the concept of slots yet, don't worry. We will cover them in depth in another course.
If you want to play around with slots though to get a better understanding now, create a page layout component that will work something like this. It'll have a slot for the header and one for the footer. Lastly, the default slot will display the page's content. Once you've tried it out, you'll find a solution in the description of the video.