Component Data Flow

[00:00:00]
>> Ben Hong: So another problem that comes across a lot of developers as they're growing as a VUE developer, is at some point they need to access a child components, data or methods from the parent. And now this might sound a little odd because most of us are, well, let's face it, the standard data flow model we're used to is top down, right?

[00:00:17]
Parent passes stuff to the child, child does stuff with it, and then if anything, we have an event that like we emit something that comes up just like standard web model, and then again it just flows down. However, there are times where you're just simply not gonna have the ability to do so.

[00:00:32]
It might be because you're using a third party library or maybe you're a library author, where you don't know what context your component is going to be ingested in. These are great candidates for this concept, known as scope slots. On the podcast episode we did for Frontend Masters, we were talking about one of the most commonly confused concepts of vue.

[00:00:51]
And I would say that in my teaching experience, scope slots tends to be the one that a lot of people quite grasp because I think it's kind of unintuitive. And then, but hopefully we're gonna go over this, it'll make more sense to people and they'll feel more comfortable using it in their component design as they see fit.

[00:01:09]
Okay, so, okay, so let's go ahead and what we're going to do, we're going to create a. Let's do a slot demo V and then call it Slot Demo and then we'll make sure it renders on our Sandbox page. All right, this time I'm actually going to delete some of this stuff so that we are Slot demo perfect.

[00:01:41]
Great. Flip. Great. All right, so going back to our Sandbox page, all right, we have a slot demo component is rendering, great. So here's the kind of problem that ends up happening is that in the event we have some. Okay, so let's go ahead and actually let me slide up my slot demo here.

[00:02:07]
And we're gonna go ahead and we're gonna do main and we're gonna do three different blocks. Okay, we're gonna have a slot for the header, we're gonna have the default. So let's see, boom, slot demo title. So this is how you set like default content in case no one sets it up.

[00:02:26]
Then you have your default slot, which is where everything else will go. And I'm going to do one more name slot called Footer. And then like this is the bottom. Okay, now that we have this, the way we have our sandbox page. Actually let me close some of these so we actually clean up the files up here a bit so it's easier for everyone.

[00:02:51]
Don't save that. The way this would work is right within the typical slot component, you would have a template that would then have the V slot pass with the name. So in this case, let's say actually we don't need header actually right now because that has demo content.

[00:03:08]
So let's just call this and say here is my normal body content. And then we'll also have a template for the footer. This is my footer content. And so if we save this and look over here, you'll see here do to do slot demo title is here. And then we might have noticed that that footer content and the main content is not showing up.

[00:03:41]
Is it because of this? There we go, okay, sorry. What we saw here, actually I should demo that is that when you have a template here without basically designating what slot it is, as you can see here, it doesn't actually know where to go. And so if you wanted to wrap it in a template block, you can basically, it's called default, you can just wrap it like this.

[00:04:01]
And we can see here we still have all three. Now if we can envision now slot demo has some data that we want to get access to, right? So let's just use the simple counter example in this particular case. And so it's keeping track of the current count and we'll just make it at a ref of 10.

[00:04:22]
And so typically you would think, okay, well again, this is a component I want to render my things. I'm going to say, well, current count is this. And so now if I go ahead and take out the default slot, we'll see here, as you would expect, current count is 10.

[00:04:40]
Right? That makes sense. The concept of scope slots is what happens when you need the parent to actually kind of get access to the data so that it can rearrange the way it actually wants it to be displayed. So in this case, let's say the parent is unable to reach into the child to say.

[00:04:58]
Actually what I wanted to say is current count is even, right? So what you would need to do in this case is you would actually need to scope slots is this concept of basically passing data into a slot as a prop that then surfaces to the parent. So think of it as a backward slot, and this is one of the reasons why it's kind of weird.

[00:05:21]
So what do I mean by that? So we'll demo this real quick. We have our default slot here, right? And what we're going to do is we'll say, okay, we're passing the count. This is like defining any other prop for any other component. We're defining a prop called count.

[00:05:33]
Although to be clear, there's no defined props up here. This is clearly just on the slot and we're passing it the value of current count. Although I need to bind this. Okay, so all we've done is give a prop to a slot. That's all we've done so far.

[00:05:49]
Now what we're going to do is inside, I'll be explicit with this one, so that's easy to see, is that you're going to be able to access your slot props through this, basically by accessing the value. So I usually like to demo it like this. So you get access to the slot props object, which you can already see has the property count on it waiting for you.

[00:06:10]
So now I can be like, this is my cool slot props count. You can see here. Now the parent is the one controlling how the data from the child is being rendered. Again, you might be thinking, okay, when would I normally use this? And the fact is you normally wouldn't, right?

[00:06:37]
This is part of the whole intermediate view thing, right? This is a common example. Let's say you're designing a select input. As we know, select dropdowns, they have a lot of different stylings that can be used in a lot of different scenarios. So you might want to create a generic select dropdown that provides all the options, all the data it needs, but the context in which it's being used.

[00:06:57]
Maybe in one select dropdown you have a picture being rendered on the left hand side with some text and it has different styles. The scope slots, or what I like to call slot props, allow you to basically have a generic component that then someone ingests and then can control how things are being displayed.

[00:07:16]
Again. So typically used for third party libraries, a perfect example of this is view multiselect. This one. There we go. So we can see here, right, this is an example of a dropdown where you have the license on the left, but then you have images and stuff on the right.

[00:07:34]
But then if we take a look at some of the other custom option templates, I mean you can see here, in this case they want the image on the left, they want the text on the right. And so what you'll see here is they're actually exposing the template, right?

[00:07:49]
And they're saying, here are the props. And then just display normal HTML as you want, right? The props have already been defined. Take the image, take the labels, style it however you see fit. Because if you're the author of this library for multi select, first of all, whoever's using it cannot just reach into your component to do it.

[00:08:10]
You're providing a generic functionality, which is to be able to provide things like multiple tagging, searching. Like, you're providing generic logic and functionality for the component, styling and stuff. That's up to how they ingest it.