Vue Js Slots Tutorial
Vue Js Slots Tutorial Rating: 7,9/10 1138 votes
This post will introduce you to how data can be passed from the parent component to child components in Vue.js using Vue slots. Before you start This post is suited for developers of all stages — including beginners — though there are some prerequisites before going through this tutorial.
Transcript from the 'Slots' Lesson
- Vue.js simplified: components, props, and slots December 10, 2020 8 min read 2425 In this article, we will be using Vue.js, Vue CLI and Bootstrap CSS.
- Vue.js - The Progressive JavaScript Framework. This change unifies normal and scoped slots in 3.x. Here is a quick summary of what has changed.
[00:00:00]
>> Sarah Drasner: Okay, slots are super exciting. I think slots are a really, really cool way to replace content per a thing and you don't have to pass things down. You don't have to use props to change things with slots, so they're really really flexible. So if we have something like our child area here, and we have this slot.
[00:00:19] And then we have this 'p' tag. It's a very veritable slot machine, haha, with the terrible dad joke. We can have this slot inside of that component. And then inside the component itself, we actually have a tag. This is slot number one. And then we have this is slot number two.
[00:00:38] I can put in more info too. So if we look at these things, these are actually what's gonna be inserted into our slots. So we can use slots to populate content. We have, this is slot number 1, I am a veritable slot machine, hahaha, and this is slot number 2 I can put more info into.
[00:00:56] So if we look back at this, we can see we didn't have to pass things down from child to parent. We're actually just using the markup itself to pass things into the slot as we need. We can put as much information as we want inside of one of these slots.
[00:01:12] So, we can also have defaults. I love defaults. We can have something like, I am some default text placed right inside of our slot. So that will just stay there and be the content of that slot until we decide that we want to replace it. So you can also have more than one.
[00:01:28] So, let's say you needed a bunch of different slots for things. Then you can start naming them. And I would actually suggest that if you're ever going to use more than one, you should start naming them. What would end up happening, if you had multiple slots and one of them had a name, and one of them didn't, is that anything that was left over would go into the slot with no name.
[00:01:46] But it's good to be a little bit more precise about those things. If you're gonna use more than one slot, I would say definitely name them. So here we would do something like h1 slot is headerinfo. I will populate the headerinfo slot. So if we have this slot named header, and this other slot, then basically anything else will go into that extra space.
[00:02:09] So we have that h1 slot header. And I will go in the unnamed slot, and that will output to this. So we have main, this is the main title, and p, I will go into the unnamed slot. So if we want to look at a slots example, we could look at this wine label maker.
[00:02:25] We have, we can make whatever kind of wine we want. So we can say Frontend Masters wine here. And I need an S at the end of that. And I'm going to change the font and I'm going to give it a flourish. And maybe give it like wood grain or cards and then change the image opacity and change the label placement, etc.
[00:02:47] But I can go in between this black label and this white label, because what's happening here is everything inside of here, this is one big SVG, everything inside of here is a slot. So we're replacing all of the content that's inside of there in the slot. And we can change out all of the styles based on that different change.
[00:03:11] So, if we go look at the code, we have this component that's called black, appBlack and it's got a template of black. And then we've got this div class of black with a slot inside of it. And that slot can populate whatever content we need or want in that place.
[00:03:32] When we start working with build tools, we won't have to do even wrap that div with a class around it in order to style it, and I'll show you why when we work with those scoped styles. But, basically we have this component is selected, remember we talked about that special is, and we can say, selected is appBlack, selected is appWhite based on what people are clicking, and we're changing out the label color as well so, let's go back to the demo itself and open it up.
[00:04:07]
>> Sarah Drasner: And in here, we've got our components, appblack and the template is black, over here we've got this container. We've got component is selected, and all of this stuff that's inside of it and these templates or these components are really simple. It's just got appblack, appwhite, and I can change out the styles based on what's inside.
Vue Js Slots Tutorial Software
[00:04:32] So I'm using these components and switching them out based on what I've selected. So you can see how you can dynamically change all of the content or change all of the styling really really easily here. And that's based off of, you know, clicking between those two values, like you saw here.
Vue Js Install
[00:04:53] So if we go back, here we got the component is selected and in the button we're saying selected, is appBlack, or selected is appWhite. So I'm changing those two components out, but I'm not changing anything that's inside of it, cuz that's all gonna be inserted with the slot.