- [Instructor] Slots are a special elements
you can use within components
that can make it easier to create templated content.
In the parent component, you would place some content
in between the custom component tag that you're creating
and this would work just like in an HTML tag.
You can add some text or some content
inside the sort of beginning and ending versions of the tag.
Then in the template itself, you would create a slot tag.
And this content right here would replace this slot element.
So this would render as some content.
Now, if you do put something inside the slot itself
like this default text, then this would render when
you don't pass anything on the parent components.
So if you pass this, then whatever you place
in between the two slot tags would actually render.
So let's take a look at an example.
And you can see that in my template here, I have an alert
and then I have a slot tag right here
with some default text.
This isn't showing because it's displaying the text
that I've placed in here instead of the slot effect.
If I cut this out, you'll notice that it will display
the fault text instead.
Now this right here has access to any variables
that are in my main application.
So not inside my component, but if I want to
I can also use a variable here.
Let's see this one's called my text.
So it has the same scope as anything else
that is in this main level of this application.
You can also create named slots.
If you want to have more than one slot in your template.
So on the parent, you will create a template tag
inside the component that you want to pass
and then give the v-slot a name.
So here would be a header slot,
and then you play some contents in here,
and this would get set into a special header slot
in the template.
So if you want to pass along something
that will go into default slot,
then you can pass it along like this.
And finally, there is a shortcut, so you can put a pound
and instead of the v-slot colon,
you can actually just type in pound here.
And it's the same as type in v-slot colon header.
Now in the component template, then these would replace
the slots that are right here.
You can see here's the header slot, here's the footer slot,
and this is the default slot.
It doesn't need a name.
That's why it's the default.
So you can see this in action right here.
It's a pretty similar sort of alert that we're creating
except that we are able to pass the header at default
and then a footer.
And then I received those in my template
and those will just replace the code that I have here.
And then here's the fault slot with some default text
just in case I don't pass anything.
And then also the footer right here.
Now you can also paths props to the component
by using v-bind.
And remember that with v-bind,
you don't need to actually use this v-bind keyword,
you can just use the colon and then a variable name.
And this in here is in kebab case
with the hyphens in between the words
and that's because this is just regular HTML.
And then you're passing along a local variable here.
And that one does have to be in camel case.
And in the components script,
you would receive the variable name
and it's going to be in camel case again
'cause this section will be JavaScript.
And once you have received that element as a prop
then you can use it in your template
just like you would a normal expression.
So let's take a look at how that works.
And here we are using v-bind,
but again you can just get rid of the v-bind part
and pass along this variable called parentVar
which is in the main component right here,
texts from a parent variable.
We're passing that down, receive it into the component
as a prop and then printing it out in the template
right here.
Now there's something scoped slots
and this is how you pass something
from the template back up to the parents.
So it's from the sort of sub component
to the parent component.
And so on the parent instance,
it's actually better if we read this backwards.
So what you do is in the component template,
you use v-bind, or, you know the colon attribute
to create a variable here.
We're going to call this my slot variable or myslotvar.
And then we can pass along a local variable
that is in the component.
That local variable,
along with any other variable you're passing,
will be received into a variable in the parent
with a v-slot attribute,
and it would go into this variable called slot data.
And then you can use that slot data
to pass along any variables that you receive
from the component.
This is definitely something you want to see
because it's sort of weird
and you have to see it to believe it.
So let me click on this
and you can see that here I am using v-bind
with that my slot variable and I'm passing along this local.
So this is a variable, not in the main application, right?
Or not in the main component
but in this sub component, right?
I have some data here with this componentVar
and I am passing along that variable, this componentVar
and another variable that I'm calling myslotvar.
I'm just keeping things different to make them interesting.
And then in my template, I have to receive that variable
using v-slot into this slot data temporary variable,
and any variables that I pass from the app component here
back up to the main app,
would be passed along in this slot data variable.
It's a little weird and you really have to sort of
try it out.
And there are instances where this could be useful.
So let's take a look at what else we have.
There's a couple of other things.
You have a lone slot shortcut.
This is actually pretty easy to understand.
If you create a slot, you can use the template tag
with this v-slot parameter, right?
But if you're doing this, you can actually shorten that up
by just putting this v-slot data directly on the component.
So essentially we're taking that
and then we can get rid of the template.
But this is only going to work
if you are using a single slot.
This doesn't work for multiple slots,
but if you have a single slot,
then this is kind of a quicker way
without having to use the template tag
to create the different slots.
All right, let's take a look at a problem solution here.
So again, we're using the same problem
we've been working on our application.
And what we're going to do is we're going to add an alert here.
That's going to be over here on the top.
So you've seen all this code before hopefully.
We're going to create another component
that is going to be an alert.
One of the nice things about this editor so you can sort of
make things collapse.
So we're creating a new one around here somewhere
and let's take a look at how it works.
So we'll take a look at the solution.
Now, what will happen is if I add a few items,
once I get past 100,
you will get this alert and this alert will be dismissible.
It's not going to appear again
but when you first get past $100
then you would see that alert come up.
And I guess I could have done like a congrats message
or something,
but let's go ahead and go over what we're going to do.
We're going to create a customer component.
We're going to include an option to specify a color
just so that we can reuse this component on other things.
And then we'll also include an option to close the alert
at a dismissible option.
Now that alert will show up when the cartTotal
is greater than 100.
So let's go back into the problem.
We'll hide all this and focus on our code down here.
And as I mentioned, I've collapsed these right here.
So what we'll do is create a new component.
We'll say app.component.
This is going to be called custom alert
and it's acquaint to have some items in it.
So for props, we're going to receive two props.
One is going to be a type which we'll just change the colors
of the alert
and then optionally we can receive a close parameter
which will include the acts that you use to close the thing.
So in addition to this,
then we'll create the template for right now.
We're also going to add a method in a minute
but we'll do the template first.
So our template is going to be a div.
And in that div I'm going to add a class parameter here.
And in here, it's going to be an erase.
I'm going to pass along some classes
depending on the value of type and also of close.
So let's go ahead and actually add the regular classes
that are always going to be there with this class attribute.
We're going to say alert.
And the way that these work normally you have alert
and then alert and then one of the color mode,
so you can say like warning, secondary, primary
whatever they are.
And also, if you want to add a close button,
you would add alert dismissible,
and that would make the spacing
for the little acts that you can close appear there.
So we're going to do those programmatically in this array.
First, we'll start off with the type variable.
We'll check to see if the type variable exists.
And if it does, then we'll type in alert
and then a hyphen
plus the type that we get passed down.
Otherwise we are going to just print out alert secondary
as the default.
And we'll do something similar for the close.
If the close exists, then we will add alert dismissible.
Raising of turnery function here,
otherwise we'll just not print anything.
So this alert dismissible will only show up
if we pass along this close parameter.
Okay, we've got the alert class
and we also need to add a role equals alert,
right?
And then we'll of course need to close out this dev
and then we need to type in the slot.
And we'll say, "Congrats
on getting some items in
your cart."
If somebody doesn't pass something along to the slot,
then this will be the default text that displays.
And finally, we'll add the button.
We'll only show this button
if we have the close parameter passed into this component
and we'll look for a click event here.
This will execute a local function
that we're going to be making in just a second
called closebButton.
It's going to have a type of button
and then some other stuff.
All right, let's go ahead and add the method.
So we'll say methods here.
And here
we'll sort of check to see what was clicked on and then
use the JavaScript parent node attribute here
to remove the note.
So this will remove the alert, okay?
Finally, we need to just
use this somewhere.
That's called custom alert.
So this will actually be in our HTML.
Right, we're going to be placing this underneath
our range input field.
So we will say custom alert
and I like to close them immediately.
And we'll go ahead and pass along the type of danger,
but you can pass one of the other bootstrap colors,
if you want to,
and then we'll pass the close as true here.
And we'll use a v-if statement
to make sure that this doesn't show up
unless cartTotal
is greater than 100.
So if we did everything right,
let's take a look at our application
and we'll add items until we get to pass the $100,
and we receive our alert
and we can close that out.
And that is how you use slots.