- [Instructor] Let's go ahead and place
our elements right here,
that create this list in a separate component.
It's pretty common to take things and put them in
sub-components so that you can reuse things
and, also, to make the code a little cleaner
and shorter in different places.
So we're going to grab all of this right here
and, then, in our source folder,
we're going to create another folder.
We'll call this components
and, then, in here, we'll create a new file.
And we'll call this one:
appointment list.view.
Here, we need to create the different sections in
a view as component, which, involves a template.
The template needs to have a single container
div and, then, we're going to paste our code.
Now, you can't just use this div right here.
It doesn't work as the top level
part of the component, so we have to add this
additional div around everything.
And, then, after this, we'll create the
script section and as the default export.
We will name this appointment list.
So this is how we're going to call this component,
when we call it.
And, then, we are going to need the information
in appointments to be passed to this component.
We're going to do that through something called a prop.
So we'll have to specify that the props that this
component needs is going to be appointments.
Now, you'll see how that works in just a minute.
So let's go ahead and save this.
This is pretty much all we need for the component right now.
And we'll go back into App.view and to make this
component work, we're going to need to add it
to our components column here.
And, actually, before we do that, I'll go ahead
and do the import statement.
So you'll see import,
and this'll be imported from components
and it notices that appointment list is already there.
Now, once we do that we can add it here,
and notice that appointments list.
Because I'm using Visual Studio Code, it appears
on the list of things that I can select here.
So it's actually a little bit better
if you import first and, then use appointment list.
Just saves you, maybe, a couple of keyboard,
sort of taps there, not a ton.
So, now, we need to use that component
and let's go ahead and get rid of this title
and this icon.
And, then, in here, we'll use this
appointments list component.
So this is going to be just like a html tag,
and, now, we need to pass along the information from
this component to the sub-component.
We do that by including a v-bind directive
and, then, we specify what we want to pass along.
Now, a v-bind is going to require that we specify
what we want to pass, so this will be appointment
and, actually, this is going to be
the name of the variable in the sub-component.
So in this sub-component, you'll notice that
I'm using this variable called appointments.
I'm expecting it passed along as a prop.
So if you think about what's happening here,
is this looks like a normal html tag and
because we're using a single one,
we'll need that closing slash.
And this looks like a property that you would
pass along to an html class.
So this is something like we pass along an ID or a class,
so we're specifying a custom property
through this v-bind directive.
Now, v-bind has a short cut,
and it means that you don't have to actually
use the key word v-bind,
you just start with the colon like this.
And you can pass along the name of the variable
that you're going to be using in here,
so that refers to appointments here,
appointments here, and that's what's in here.
Now, to the right of that, you pass the name of
the local variable, so that, right now, is going
to be appointments.
So let's take a look at what's going on here
and it looks like nothing's showing up,
so if we look at our code, I can see that
the problem is that we included these
curly braces in our import statement.
And when you have a default export statement
like this, then you just import the library,
just like we did with axios down here.
You don't need to import a specific item.
So when we do it with the curly braces,
it means that we are exporting more than one thing,
and we want to specify which thing
we want to import when we use this import statement.
So when you're importing the whole thing,
just remember no curly braces.
Also, notice that you don't really need to
add the .view at the end of appointment list.
It will automatically pick up the fact that you
want to do a .view file here.
Although you can put it in and it doesn't
really hurt anything either.