Basic Menu List Setup 0:00Scoped slots are new in Vue 2.1, so they've been around a decent amount of time at the time of this recording. But you know what? I've only recently come across them, and they were hugely useful. So let's see how you can leverage them in your own projects. Now, I'm going to use a Laravel project just to have the basic structure and compilation, but of course, use whatever you want here. Okay, so I'm going to go to my root app.js file, and you can see, yeah, standard Laravel stuff. We pull in Vue, and we offer a example global Vue component. So why don't we build off that? And we're going to use just a simple menu list here. Okay, so let's access that file. And yeah, you know, we could just do something very, very standard, 101 stuff, where we say, well, let's filter through all of the items, and we will alias each one as item. And then let's just set the vtext to that item. Okay, and you're going to pass that into us.where we say, well, let's filter through all of the items, and we will alias each one as item. And then let's just set the vtext to that item. Okay, and you're going to pass that into us. So does that all make sense? App.js makes a menu list component globally available. So if I go to my home view, we import the compiled script, and then I can now say menu list. Okay, so let's give it our items. So we'll just do a simple array, one, two, three. And now let's view this in the browser. And sure enough, yeah, basic 101 Vue stuff. But now here's where scoped slots come into play. Often you'll find yourself in this situation where, imagine this menu list is actually a third-party package. So it's a set of components you want to use. And these can be incredibly useful, but what about the times when you want to modify them? So you don't want to just, maybe in this example, you don't want to just spit out the list item directly as text. Maybe that Default Slots Overview 1:33incredibly useful, but what about the times when you want to modify them? So you don't want to just, maybe in this example, you don't want to just spit out the list item directly as text. Maybe that needs its own HTML. Maybe it's like a little media object. So it needs to be more flexible or more specific than the component allows for. Okay, well, if it's your own component, of course, just fix it, do whatever you want. But again, when you're pulling in somebody else's code, you don't have control over this. Okay, so here's what you could do as the creator of the package. You can make things more flexible by using slots. And we've already reviewed this. Now, right here, this is the default slot. So I could say right here, default, and then let's just hide this for the time being. And yeah, if we come back to Chrome, refresh, of course, you're going to get the default. Now, the way slots work, we haven't named this, so the way the default slot works is,And yeah, if we come back to Chrome, refresh, of course, you're going to get the default. Now, the way slots work, we haven't named this, so the way the default slot works is, if we add any text here, we instantly override the default slot. So I give that a refresh, and we'll get three instances of override. All right, so again, we've already reviewed this at Lyricast. But now, scoped slots, here's how this works. So yeah, we've decided we don't want to just spit out the item directly within a list item. So this will be the default here, but if you want to override it, for example, maybe it should go within an H5 tag. Okay, well, if we do it like this and give it a refresh, sure enough, we have our list items, but we are overriding the contents of each list item. And again, you're probably thinking, well, I already knew this. Well, the difference is what happens when you need to access data from the original component. So in this case, I just Using Scoped Slots 3:04list item. And again, you're probably thinking, well, I already knew this. Well, the difference is what happens when you need to access data from the original component. So in this case, I just kind of want to say, like, spit out the original item there, but I can't do it because I'm in a different context. And in this case, PHP is getting mad. But yeah, even if I did it like this, or we did V text, yeah, it's still not going to work because we're in a different state. So here's what we can do. We can use, we can treat this slot component almost like a reusable template that we pass properties to. So now I could say item equals item. So we're passing props to the slot here. If we now want to grab those, all I have to do here is say template, and we're going to scope it to those props. Okay, so now I have access to all of the properties here. So in our case, if we want item, I could say V text equals props dot item. So now if we come back togoing to scope it to those props. Okay, so now I have access to all of the properties here. So in our case, if we want item, I could say V text equals props dot item. So now if we come back to Chrome and give that a refresh, you can see we have overridden the default layout, and we're still able to access those original values. So yeah, I think at first this can be a little confusing to wrap your brain around. So template scope, what is props? Is that a specific value? Does that correspond to this? Well, let's just go through it one by one. This, it's just a temporary variable. If you want to call it data, if you want, it's all still going to work. It's just a variable name that's going to refer to all of the props that you passed to your slot. So for example, if I were to say slot thing equals foo, okay, well, if I now want to access that, I can go back to my parent template. We will accept the props, and then I can say props dot thing. All right, come back, Props and Destructuring 4:40were to say slot thing equals foo, okay, well, if I now want to access that, I can go back to my parent template. We will accept the props, and then I can say props dot thing. All right, come back, give that a refresh, and now we have foo. And you can pass, of course, as many things as you want. So now we have bar. Let's come back. Props dot bar. And of course, we're going to get bass there. Now, another thing you may see is, in examples, they will use destructuring, ES6 destructuring. So if you see something like this, and you're thinking, well, what is that? Well, once again, just to prove it to you, you'll get the same thing there. This is basic destructuring. So I guess a quick recap, a little review here. Let's imagine you have some kind of object, a person. First, we'll do me, or John. And last is doe. Okay, well now, maybe we just want the first name. I could always say let first equals person. And now if we run that, we have accessa person. First, we'll do me, or John. And last is doe. Okay, well now, maybe we just want the first name. I could always say let first equals person. And now if we run that, we have access to it. So you'll find in your JavaScript, this can be incredibly useful for function arguments, or scoping like this, where you don't need the full object. If you're going to do props, and you're always just going to do props dot bar here, you can get rid of that, that root object name by just saying, well, all I care about is the bar property from it. So we'll reference it like that. That's how that works. But yeah, anyways, if I switch back here, we have scoped slots in a nutshell. So if we bring this back to what we had before, we want to ensure that the item is available to the user who is referencing this component. So we're going to pass it through as a prop. And now once again, if I clear all of this out, Named Slots and Overrides 6:12we want to ensure that the item is available to the user who is referencing this component. So we're going to pass it through as a prop. And now once again, if I clear all of this out, we have the default, a good default. But then again, if you want to override it with your own data, then you can scope to your props, and then just reference whatever HTML you need here. So maybe with an m tags, you'll reference that. And whoops. Anyways, yeah, it gives you complete control over the markup should you need it. So it's a really nice way to provide a default, while still giving you the flexibility to completely control the presentation if you need to. Now, finally, one last thing, if you're, of course, using a named slot, like name equals menu item, you know, that could even be its own component. But just as an example here, well, of course, now, if we were to switch back, we're no longer overriding it,menu item, you know, that could even be its own component. But just as an example here, well, of course, now, if we were to switch back, we're no longer overriding it, because there is no default slot. So in those cases, you would want to make sure you're specific about which slot you are overriding. Alright, come back, give that a refresh. And now once again, we're using our custom template here. Alright, that's all there is to it. So when you want to allow a structure to be overridden, there's actually a lot of uses, but that's a common use case. Anyways, you're going to use your slot, and you're going to pass through any properties that or props that might be useful to the consumer to the user. And then in the parent, if they need to override it, they can use a template here, they scope it to those properties, and then they instantly have access to any of the props that you've specifiedif they need to override it, they can use a template here, they scope it to those properties, and then they instantly have access to any of the props that you've specified here. Especially for reusable components, this is incredibly useful.
