Components with slots gives you some functionality that you could pass in data into specific areas of your component to make it work. So in the example here, they've made a component called app, app header and app footer. To set this up, you have a child component like this and you pass in the value of a message. Well, where should that value go? Should the message be bound to the parent data or the child data? The answer is the parent. A simple rule of thumb for component scope is, "Everything in the parent template is compiled in the parent scope. Everything in the child template is compiled to the child scope." So they talk about a common mistake is trying to build a directive to a child property method of the parent.
So here we have that child component with v show someChildProperty. When reality there, this is assuming that this is the property of the child, but really is the parent and that is going to be a problem. So let's go ahead and you can see here also specifying the div someChild component. If you need to buy the directive you could specify directly to say someChildProperty is true.
So single slot with your elements. So div h2 slot and that's the individual slot, and this is how you could go and specify. So my component p and my slot. So if I go and grab back to our basic example here, I'm going to undo a couple of times and let's take us back to our basic my-component. And that's my component equals component, it takes a property of message. I'm going to get rid of that value and then this is the template that it is here where it says, the message value. I'm going to remove that here as well so it just looks like that.
And then up top here where I wrote the input field where we were passing, I'm just going to make it just so it's just like that and I'm only going to do one of them. So it looks like that my component basic component, my component template div component. And so to get started with this, we can specify slot inside of our code. So we'll say slot and cone or forward slash slot and then inside that slot is where we're going to put our data. So if we grab these two p tags and we were to paste it in the side of our data like this, now refresh, you can see that this data goes inside where that slot goes. And notice, I'm not specifying it where like I did before, was like the model message or something like that or message cone equals to value or something like that. I just can pass it in via a slot.
So if we go through, we of course that's probably not going to be enough. We can do named slots, so maybe I'm making something like a card or a mole on I wanted to make it reusable. I can remake it reusable using these slots and I give it a name such as we've done here as slot name and then the name of the value. And then I can reference it by referencing it with the slot value here. So again, this is the header tag, which is HTML tag and the main tag and the footer tag of HTML tag but we're going to reference this slot header or we can reference it as slot name.
And again, all you're doing is specifying the name field in this. So if you want, you can just come in here and say name and I would say title for example. And then up top of my code here, where I would specify that p tag or that element, I would then say slot and then the value that I just gave it. So I'm going to say slot title and notice I only specified it on that p tag there. So now if we refresh, you'll only see the value there because I've only specified it on the title.
Now, if I wanted this to be in the footer, I would then can come down here and actually let's put this all in one line still because we have not gone over that yet. I can go and specify one more of these and say footer where the title value was and then if I come up to the top here and say, slot equals footer, and now you'll see both of them and they're in their various places. Now I can then go and style these components differently based on if it's in the footer or if it's in the header as we go through it. And here's an example of how that's set up and of course you can set up scoped slots as well. So slot text equals hello world, or hello from child. And then you can say prop text and putting that inside of a template here.
Here's some more examples of this, so my awesome list items is item and then we were saying, li, slot items, slot scope, class, prop texts, and li. So here we're specifying multiple options inside of that and then we can set up that template here. All right, let's move on to the next episode and talk about dynamic components.