- [Instructor] One way to make our components more flexible,
is through the use of slots and slot content.
Again, we'll use the read more component,
for a simple example.
We're already allowing the consumer of this component,
to provide a URL through that prop.
But, what if we wanted to allow someone to
provide custom content for the link text?
We could certainly use an additional prop,
but, what if we want it to be even more flexible,
and allow arbitrary HTML content there?
That's where slots come in handy.
So down in the read more template,
if I just change this link text, to a slot element,
with open and close tags,
that becomes a placeholder for any content
that's between the read more tags in the main template,
meaning anything that's between,
the open and closed tags there where the cursor is now.
So I could put the read more text there,
and the main template now,
but, let's try something a little different,
and I'll wrap it in EM tags,
just to make sure that this is working when I refresh,
I'll say click here to read more.
So now I have my custom link text,
provided through a slot and I can see that,
the link is still working.
You might be wondering what if,
you want to make this content optional,
and perhaps fall back
to the read more texts that we had before,
if nothing is provided here.
That's pretty easy.
Just put the read more text, between the slot tags here.
So if I refresh again, I still see the same link text,
but, if I go back up to my main template and,
remove this,
then I see the default content.
Sometimes you want to include multiple slots in a component.
Maybe we want a copyright line, below the link here.
To use multiple slots, give the other ones a name.
So we could say,
slot,
name equals,
copyright.
Then, up in my main template,
to provide content for that slot,
I can use a template element, with the V slot directive,
and the slot name like this.
So I could say,
copyright, 2021,
flashcard out.
If I still want to provide content for the default slot,
for the link text, I can do that the same way as before,
or I can use another template element with V slot default.
So let's make sure this much is working.
That looks good.
And,
next, it's important to understand that,
if for some reason I wanted to use the URL,
in the slot content here, I would have to do that,
by referencing read more URL, and not,
just URL.
That's because the scope that we're working with here
is still the route scope,
because we're in the root template.
And URL is only defined inside the read more component,
after it's passed in as a prop.
But what if there were some data in the read more component,
that we wanted to reference here?
And what I mean by that is,
what if read more had its own data?
For example, if this component,
somehow kept track of the year, if we had,
year 2021 here.
In that case, we could make it available,
to the copyright slot, by passing it as a prop to the slot.
So I would have here, year equals year.
And we might have multiple props like this,
and we would access them by adding a name
for an object that contains all of them as a value
for the V slot directive, backup in our main template.
So V slot copyright equals, we could call it props.
And then instead of 2021 here, we could do, props.year.
Let's check to see if we did that correctly.
Still looks good.
Now I would say that,
this convention and its syntax here,
is pretty far from intuitive.
So don't worry too much about this right now
if you find it confusing.
The main takeaway here should be that, if we need to,
we can access data from the child component,
when providing slot content, from the parent component.
We'll wrap up this chapter
with a look at a more powerful way to work with components,
that have proper templates as normal markup
in separate files instead of specified as strings.