4.1 Using Scoped Slots

Slot-scope is a fairly new feature to Vue.js, and it's also an extremely powerful feature. And we're going to use slot-scope to create some unconventional components that are actually quite useful. So in this lesson, we are going to learn about slot-scope, so we're going to do so with just a simple list. So we will have a list component that has a prop called items, and then we will pass in just an array of something to display. So it's just going to be an array of strings, and we will display those strings. So the data that we're going to display is guitars, because I love guitars. If I had all the money in the world, I would buy all of the guitars in the world, you can never have too many. So let's have our data, and we will return an object that has a guitars property, and let's have three guitars. We'll have a Les Paul, we'll have a Vela, and then we will have a Starla. And of course, we need to import this list that doesn't yet exist, that's going to be from a file called list.vue. And we of course want to register that list, so let's implement that now. We want to create a new file, we'll call it list.vue, and the template is going to be very straightforward. We will have an unordered list, and of course, we will display each individual item within an li element. So here, we're going to use v-for, and we're going to get the item and the index from our props called item. Let's go ahead and use key, so that Vue.js doesn't fuss at us in the console whenever we look at that. And then we went to output the item, and that's great. So now, we just need our prop for items and, well, that failed to compile, why did that fail to compile? And, yeah, from that different language. So there we have our names, so nothing out of the ordinary there. So let's say that, okay, we have our list, but we wants to customize the way that they are displayed in the browser. But we want to do that from here, inside of our app.vue, instead of our list component. Because we want our list component to be as generic as possible. We don't want to come in here and start doing things specific for our list of guitars. So over the course of the past what, three, four lessons, we've worked a lot with slots. And we've seen how we can use slots to customize the content of a child component, and it could look something like this. Let's say that we wanted each guitar to have an h3. So we would say h3, then we would say item, because that's what we used Inside of our list, we use that item. And we would think that that would work, except that we need to come in here, and we need to say slot instead of item. Okay, so let's save it, and nothing happens, let's refresh the page, there we go. It looks like there's nothing there, however, let's inspect one of them. We're going to see that we have our li elements, and they have an h3, but there's no content in Inside of them. So we're halfway there, kind of, we are at least providing some custom content, but item here doesn't really exist. Well, let's go back to our slot. Now, we have created named slots before. All we had to do was add a name attribute, and then give it a value, that's not what we need to do here. Instead, what we need to do is essentially bind a value to a prop, and we do that just like this, item = 'item'. So what we're doing here is, we are essentially going to pass an object back to app.vue. And this object is going to have a property called item, and it's going to have a value of item. So for each iteration, we're going to be able to access this individual item, so to do that, we will go back to app.vue. And just like we used a named slot, we would set the slot attribute equal to whatever name that we specified? In this case though, we're going to use an attribute called slot-scope. And this is going to give us access to that object that is being created from our slot-scope. So this is going to be an object that has a property called item. So this means that right here, we can say props.item, and then we are going to see our customized content. But here's the really cool thing, we can destructure this, we don't have to use props here. We could destructure it so that we have the individual item, property. So that now, we just have to output item, and we get the same result. But now, we could be a little more specific here, because we are working with a list of guitars, so let's do this. Let's say that, okay, we're going to destructure our item, but let's call it guitar. And then we will use that to refer to our guitar name, and once again, we have the same results, but let's also include the index. So we would do the same thing, we would have our index property bound to the index value. That's going to create an index property that we can then access by destructuring it, here. And if we wanted to include that, so we could say index, and then colon, and then guitar name. Let's put this on two lines, so that we can see it all on screen. And whenever we hit save, we see that that is updated. So for all intents and purposes, we are passing data from our child component to our parent component, through a slot-scope. So for every bound property that we create, we will be able to access from the parent component with our slot-scope attribute, and the object that is essentially past to it. In this case, we are just destructuring it, to make it easier to work with that data. So now, let's do this, let's make our guitars array a little bit more like a data structure, to where we have an id property, and then the name. So we will have id and name, and let's just copy that a few times, let's change the id values. And this is, of course, going to change the way that we want to work with that data. Now, if I just save that, we're going to see that we have some content here. We still have our index, but now, the item property is the actual object that we are working with. So we now want to use our guitar.name property, if we want to just display the name, and that was the wrong thing to do. We want to use that down here, guitar.name. So that then, we will once again have our index and then we will have our guitar name. But the index really doesn't matter in our case, so let's get rid of that. And instead, we want to perhaps have a link for the individual guitar. So in that case, we can have an a element where we href, and we need to bind this. And our string is going to be guitars/, and then we will say guitar.id, and then we will have our guitar name. So let's put this on another line, and now we have a list of links, and let's inspect one. So we have a link, the href is /guitars/, and then the id. So slot-scope is a fantastic way of passing data from a child component to a parent component, in order to customize how that information is displayed.