- [Instructor] Okay so now that we've got pretty
much our entire app set up,
we've got a fully functioning front end here.
There are still a few more things that we should do
in order to have our front end in the best possible shape.
Now, you may have noticed that when we were building
out our products page and cart page, that the templates
for both these components were a little bit complex.
If we take a look at those now, for example,
if we take a look at the products page,
we can see that the template for this is,
well it's a little more complex than it needs to be.
Generally, we want our components templates
to be dead simple, and we want all the code
in each of our components to be reusable.
So in our case,
the way that we can improve both the products page
and the cart page components is going to be
by splitting out the lists they contain,
as well as the items in those lists
into their own components.
So in this video what we're going to do,
is we're going to split out the grid on our products page
into separate reusable components.
And after that, splitting out the list on the cart page
into separate components is going to be left
as a challenge for you.
So the first thing we're going to do here is we're going
to create two new files to hold the reusable components.
And we're going to do this inside
our components directory here.
The first file we're going to create
is going to be called products grid dot vue.
This is going to be the actual grid itself.
And then we're going to have another file
called products grid item,
which is going to represent each of the individual items
on our products page.
Each of these individual cards here.
And we're going to name that products grid item dot vue.
And the next thing we're going to do is we're going
to write all the code for these components.
And don't worry too much about this.
A lot of this is just going to be copying
and pasting code from our existing products page, okay?
So let's have that open over to the side,
and let's start with the products grid item.
Basically, all we need to do is we need to sort
of isolate the part of this template here
that we want to display as a products grid item.
And in our case,
that's going to be everything inside this div here
with the V-for directive on it.
We're going to copy that
and put that inside the template
for our products grid item component.
Okay.
And let's fix the indentation for that as well.
Indent that.
And one of the things that we're going to do,
first of all, is we're going to delete this V-for directive
since we're actually going to be using that V-for directive
inside our products grid component to display more
than one products grid item.
We'll see exactly how that's done in a second.
And we're also going
to take off this V-bind key thing, okay?
So the only thing that this is going
to have is the class property.
All right.
Other than that, it's going to be pretty straightforward.
The rest of the stuff is going to be the same.
We're going to have product dot imageURL, product dot name,
product dot price, et cetera.
Now, the thing you may be wondering
is where are we going to actually get
this product data from, okay?
Now one possibility might be to just import our products
into our component, the same that we've been doing
with our pages, right?
So we could have a script tag here.
And then inside that script tag
we could say import products and do whatever kind
of filtering we want based on the route.
And this might work.
However, this would prevent our component
from being really modular, right?
Basically what we want to do is we want to decouple
the data that our components display
from the components themselves.
And to do this, we're going to use something called props.
So what are props?
Basically props are sort of openings in our view components
that we can pass data to from parent components.
Just like HTML components have attributes
that we can change.
You know, the href attribute on an anchor tag for example,
or the source attribute on an image tag.
Props are just a natural extension
of this into user defined components
such as our products grid item.
And here's how they work in view.
In the case of our products grid item component,
inside our default export object
which we still have to define here,
we'll say name, products, grid item.
And then inside here, we need to say props, right?
And this is going to be an array containing the names
of the props that we want our component
to be able to accept.
So in our case, we want it to take a prop called product.
And then what's going to happen is the parent component
of our products grid item component
can pass down a value for this prop.
And in our case, this will be the products grid component,
which is going to do something like this.
And this isn't going to be the
exact code we're going to write, it's just to illustrate.
Basically what it's going to do is eventually
it'll say something like products grid item,
and then it'll use the V-bind directive
and pass down the product prop, something like this.
We'll see exactly what that's going
to look like very shortly.
So anyway, that is the template and script for it.
The last thing that we need to do
for our products grid item component
is open up our products page and copy
and paste all of the relevant styles
into our products grid item.
So that's going to be everything from product item here,
down to the very bottom, okay?
So we're going to copy that.
We're going to create a style tag her.
And we're going to paste those styles into here.
And then of course we can go back and actually delete those
from our products page, since it won't need it anymore.
Okay.
And the next thing we're going to do,
now that we have our products grid item component finished
is we're going to implement our products grid component.
Now we could copy and paste some stuff for this one,
but really most of it's going to be new code
that we're going to write.
So, here's what it's going to look like.
We're going to start off with the template.
We're going to create a div here with the class grid wrap.
Okay.
And then what we're going to do is inside this div
we're going to display multiple product grid items.
One for each product that our products grid is going
to display, okay?
So we're going to use the V-for directive for that,
and here's what that's going to look like.
We're going to say products grid item,
and then we're going
to say V-for equals product in products.
And we're going to use the V-bind directive
which I'm going to use the shorthand here to do key.
The key for that is going to be product.id.
And then we're going to pass the product prop down
to our products grid item.
Remember we defined that prop inside of here.
And that's just going to look like this.
We're going to use the V-bind directive for that as well.
We're going to say colon product equals product,
just like that.
And let's close off this div here
and close off the template.
And then we're going to define the script for our component.
So here's what the script for our products grid
is going to look like.
We're going to say script.
Inside here, we're going to have export default.
The name of our component is going to be products grid.
And then, since we're displaying
our products grid item inside of this component,
remember that we need to import that.
So we're going to say import products grid item
from dot, slash, products, grid item dot view.
Okay.
And we need to register that component inside here
by saying components, products, grid item,
and then in order to actually display the products on here,
you might be thinking that it's a good idea
to import our products from our fake data up here, right?
Like we did on our pages.
However, then we'd run into the exact same reason
that we didn't do that in our products grid item component,
which is that we want our products grid to be sort
of flexible and modular as well, right?
We want to be able to define what products
that our products grid is going to be displaying depending
on where it's being displayed, right?
And here's what I mean by that.
If we were to just import our products
into the script tag and pass those through as data,
then this products grid would only ever be able
to display those same 12 products, okay?
However, if we add our props property
to our products grid component as well, right?
And the name of that prop is going to be products here.
Then what that allows us to do is pass
this in from our products page, right?
Or from wherever else we want to display our products grid.
So right now we're only displaying a products grid
on our products page, but maybe somewhere else on our site,
later on in our development process
we want to display a grid somewhere else on the page.
And in that case,
all we would have to do is display products grid
passing different products as props.
So hopefully that makes sense.
The last thing we need to do here
is we're going to just copy and paste the remaining styles
from here into our products grid.
And now that I'm thinking of it,
I didn't add these scoped property to our style
of products grid item.
So I'm going to do that right here so it doesn't overflow.
Scoped, scoped, and we can just delete this style tag
for our products page,
since it doesn't really need it anymore.
Okay.
So now that we have our products grid
and products grid items created,
the last thing we have to do is convert
over our products page to actually use those components.
So here's what that's going to look like.
We're basically going to delete everything inside
our products page,
except for the surrounding div which is called page wrap.
Okay.
And inside here, we're just going
to display our products grid.
And we're going to use V-bind,
which I'm using the shorthand here again
to pass the products prop to our products grid,
and the value for that is going to be products
which we actually have a value for here
since we're importing it from our fake data.
Okay.
So that's pretty much all we have to do.
One more thing is that we just have to import
and register our products grid component
into our products page.
So we're going to say import products
grid from dot, dot, slash, components, slash, products,
grid dot view.
And then we need to just register that here
by saying components, products, grid.
And that should be all we need to do.
So now, if we run our application
and we may need to refresh it,
it really shouldn't look any different.
The only difference now is that instead
of this part of the page being one sort
of monolithic component, it's now three separate
very modular components that we can use
to do other things inside our app.
And that's the beauty of using modular components
and props in view.