- [Narrator] Let's take a look at what it would take
to move a larger component into its own place.
So, the price component works pretty well,
and if you're starting from the previous video,
I've already modified all of the things
that used to be run by the filters,
and I've used this new price component instead,
so that's already been done for you.
Now what I want to do is go ahead and move everything else
that is actually in my HTML, and if I go to My Shop here,
everything that's right now under this transition group,
I want to make into its own separate component,
and I'm going to call that component "product list".
So, this is going to be a little more difficult
than it seems, but it's pretty common to start a project,
and then realize that you want to break things up
a little bit better.
So, let's go ahead and grab all of this codes;
remember, this is compressed down,
so there's actually a lot more code,
but if I click on this triangle here, I can sort of
compress it to just show you the beginning and ending tags.
And I'm going to cut this out, and what I'll do is
create a new tag called "product list" here,
and it's going to need two additional props.
Just like how, in the last movie, you can pass some
information along to a sub-component, I'm going to need
to pass two things.
First is the products,
and also the maximum value,
so in this main component, I have a value called "maximum",
and it keeps track of the current value of what's
in the tool bars, so I know that I moved everything away,
but it keeps the default value for this right here.
So, I need to pass that along,
as well as the list of products,
so let's go ahead and do that.
And I see, that's in my HTML,
and so I'll do...
I'll do products, and I'm going to
pass it along, the products.
And I'm going to pass that along with a semicolon.
So this is the same thing as
doing V bind, so this is going to be bound
as a prop and passed along into my "products list".
And then I need to do another one for
the maximum variable so I'll call that "maximum"
and that's going to be bound to the maximum
value in this main component.
So remember the thing on the left is going to be
the name that I'm going to use inside my component
and the thing on the right of the equals sign
is the same thing as,
I have in my data.
So now we can switch back to the component
and I have my price component compress
and that's kind of one of the nice things that you
can compress these things, when you get a lot of them.
And make your screen a little bit easier to read
and that works in just about every editor.
So I'm going to do a new view component
its going to have a name called "product list"
and then its going to get an object.
Right, and in here I need to go ahead and pass
the props that I'm using, and I'm using two props.
One that I called "products" so that's the thing
on the left of the equals sign.
And another one called "maximum".
Then I'm going to pass along a template
and in here I'm going to use
the till the marks, so that I can do a multi line template.
So there I'm going to just paste everything
that was in my transition group,
and lets go ahead and take a look its not going to work
I know its not going to work.
But you can see that everything's broken up right now
so one thing you can do here, is pull up the
console and see if you have any information about
why this is not working.
So one of the errors that we got here,
is that this is looking for an event called leave
that is one of the events
that my
transition group is using and the problem is
that the enter before enter and
leave event
are in my main component, they don't exist
inside this component.
The call that I'm doing here is calling
for it in this component so I need to move
some of those around and this is actually
going to make my component a little bit better.
Because its going to take things away that are in
this main component before enter enter and leave
and just put them where they belong
with the sub-component.
So I'll take that out
take all those methods out
then I'll open up my "product list" component
I've got the template, here, lets scroll down
here's the closing version of the template.
And so there I can do methods,
create a new object,
and just paste those methods, from the previous component.
So. So lets take a look at it now
and you can see that
it actually came in quite easily
and lets go ahead and clear this out, sometimes
just to make sure I don't have any other
errors I can clear something out
and then I'll do that trick where I put in a space bar
in my HTML so it reloads,
and what I look for is to see there's any other errors
in here.
I don't have any errors, however
there's something that's not quite working yet
and that is what happens when I click on some of these
right here.
So if you did have a console pulled up you would notice
that if we tried to add an item, we get a new error.
And to fix that error, I need to talk about how
you pass events down into components,
from the main component.
So we'll do that in the next video.