Scope Slots

[00:00:00]
>> Ben Hong: So the great thing about slot props is that it's very explicit. You can see here that you're defining the prop here. And then when you're accessing the slot prop here, it actually tells you what it is. And then for those of us that don't like to have a bunch of prefixes, you can actually destructure it.

[00:00:15]
So it actually can just look like this as well. That's a standard JavaScript nothing view. This is normal JavaScript. Okay, so you're probably thinking, okay, this is cool, but there's gotta be some cons to this, right? And there is. The reason it's called Scope slot is because the context in which you're exposing this data is within a very specific scope.

[00:00:32]
What is that? Scope the slot. Meaning we cannot now just go, hey, I want to do like const. Double count here and then be like return count. Like that's not possible. This prop is only exposed at the slot level. And so essentially you really only doing it for like, in my mind, most of the time you're just doing it for display purposes and rearranging things.

[00:00:59]
You're not trying to like combine the logic. And honestly, I'm not sure you would want to do that. It gets really messy if you're able to do that. That's something to consider as far as how you can do that. Now, the other technique that I want to introduce you to is something called use slots.

[00:01:18]
Why is use slots helpful? Let's say for the footer we have, as you would expect, you have an actual footer element that wraps this. And let's just say it has a bunch of my custom footer classes on it. Let's go ahead and actually eliminate any default content because, well, sometimes there's just no content.

[00:01:46]
The problem with this, as you might be able to imagine, is that when this is rendered, the footer DOM element is still going to be rendered, meaning you have essentially orphaned HTML elements that really shouldn't be there to begin with. What you can do is, if we import use slots, which is a helper method, it basically exposes what slots are being used inside of a given component at any time, what's being passed in.

[00:02:15]
So we can see here use slots. What we can do is, you can see here I can go V if slots footer, that should do the trick. If we come over to the demo, I have something in here we can inspect. And if we take a look that VIF has removed the footer element, as you would want.

[00:02:54]
This gives you additional control over how you want to actually use your slots, because before knowing this, your initial temptation might have been to just wrap everything in, like, a template block in, like, in an like. So you might have done something like this, you might have done, like, slot name is footer, and then you would have, like, thrown this inside of, like, throwing your footer element inside.

[00:03:21]
But again, this only, like. Well, I mean, frankly, you are providing the slot content to render, so you kind of. It's not really what you can easily get out of it. And so this is why it's a very clean way to basically check, like, hey, does my slots contain a footer slot?

[00:03:38]
Essentially? And so this is related to this name, by the way. That's how these two are connected. And so, yeah, it's just a great way for you to programmatically get access to it and then do any logic that you need to accordingly based on whatever slots are available to you.

[00:03:51]
So, as far as design patterns go, you'll notice that we focus a lot on composition in a lot of techniques we talked about. In other words, like most of us, when we started out with vue, we learned about props, we learned about emits, and those are what we consider more configuration type design patterns.

[00:04:04]
You're being very explicit about what API you're going to be using. I'm using this and this, and I'm going to use it this way. But the problem with that is that it's very rigid, right? And so you can imagine, especially with there's an exercise I do in the Production Grade View course, where you take a base button and you add all these requirements to it, and if you do it the props way, your props become a walking dictionary.

[00:04:25]
And. And it's very, very difficult to navigate. It's one to, if icon is left, then show this, and then if icon is right, show that. It's pretty miserable. But composition, and I think one of the reasons why composition API has also taken off the way it has, is because it allows you to really organically grow your components to a point where it does make sense to specialize them.

[00:04:44]
Whereas configuration, you specialize immediately. You're like, I want a button that has a left icon. Then you create a prop that says left icon equals left this. Instead of, like, here's a button, you can put stuff in it, use it. And then if over time, you're like, I noticed, like, 500 components have always used the left button icon with these styles, then that's when it makes sense to be like, okay, we're going to create a base button, let's say left icon, and then that can refactor all that out.

[00:05:10]
And then so what you get is what I like to call data driven refactoring. Rather than sort of like when you're doing props, it's easy to get into like optimizing what you think you might eventually need. Composition kind of frees you of that because you can totally expand to whatever you need, but at the same time you're not bound to those very rigid definitions up front.

[00:05:28]
There's just something to think about. It's not that you should never do configuration. In fact, we saw in some of our based components that when certain things are, you absolutely want to be in there. Configuration is really helpful. But composition is the one I do try to get people to default to when they're designing their components, it's just more flexible and just easier to evolve.

[00:05:46]
>> Speaker 2: Would the most common use for scope slots be to pass components into them and allow you to kind of rearrange components that way?
>> Ben Hong: Yeah, you could, yeah. So because with the scope slot, I mean you have free reign of like however you want that data to be used.

[00:06:00]
And I mentioned this, I guess I didn't demo this earlier, but you can technically feed methods into it too. So functions and so if you're like rearranging a modal, for example, and you know that it has a closed functionality already in your child, it doesn't necessarily make sense to like create something that like throws it to the parent.

[00:06:17]
So you, through a scope slot, you could theoretically expose that method to that one section, call it like an action slot, and then in the action slot you just create whatever button or arrow you want and then just call like the child child's close method.