- [Instructor] Next, lets bring in
the product-list component
which is substantially more complex
and you're also going to see that
there are certain things
that we want to put on the main component
and certain things that will go in a sub component.
Lets go ahead and prep our project
for what we're going to be doing.
So I'm going to create a new file in the components
its going to be called ProductList.vue
and just like before, we're going to create a template section,
a script section,
and these ones not going to need a CSS section either.
in our template section,
we're going to bring things in from our project.
So here's our template,
I'm just going to go ahead and copy all these
and just paste that template in here for right now.
Then in our script,
we're going to need to do some other things first
since this is going to be using the price component.
I'm going to import it.
This one isn't in the same folder as this component.
Right? so price is right here,
so I don't need to put in components
I just do ./Price.vue
Then, in our export default
we want to add a name to this component
so this will be "product-List"
and lets go ahead and add the component
that we're bringing in
which is the {Price},
right now and this component
is going to need a couple of things in order to operate.
So in props, I'm going to make an array of products
and also maximums.
So these are the things we going to need
to pass from the main component.
And then we can put in a methods section in here
because here in our transition,
we're using some custom methods that we created earlier
so we'll go back into our code pen pitch
and copy these different methods before enter... lets see
lets us go ahead and grab all the methods that are in here
and we'll obviously replace these with our methods.
I think it only has those methods
that we need here anyways.
So, that's great,
so lets go ahead
and save our Product List
and go back into app.vue
and here is where we need to do some other work.
So I'm going to go ahead and get rid of all these stuff
and just bring in my product-list component.
and make sure that I pass along the two values
that I added as props,
maximum as well as products.
We need to make sure that we bring that in
whether we actually create
so this will be coming in under data
and data always in components needs to be a function
and that function needs to return
an object that's going to have the data that we want
so we'll set up a maximum with a default value of 99
and also products which we'll define as null for right now.
Means that we'll need to get the product information
and we're bringing that in as a lifecycle method here
so under mounted,
so I'm just going to go ahead and copy this one
and bringing in here.
Right, also we're going to clean this up a little bit.
This particular component no longer needs
to bring in price
so we'll need to get rid of that one there
so instead of bringing in price,
we going to bring in the new component ProductList here
and it means also that we need an import statement here.
import ProductList from
and in this case we need to reference the folder
'./components/ProductList.vue';
you can actually see the components coming in here.
So, its a little bit more challenging
but really pretty much like what we did in price.
The only thing you have to remember
with this new component is,
that some things like bringing in the data from an API
really needs to be done in the parent component.
That's because more than the ProductList component
is going to need access to these products
and so they should go in the parent component
the same way the main sort of data parameters
are in the main component
and when we need to
we can pass them along to the child components as props.