- [Instructor] Components help you organize
a complex project into smaller pieces
so you can build reusable items.
Now, in order to create a component,
the first thing you need to do is to separate the way
that you've been calling your application.
So in the past, we have used the createApp method
and passed it into a variable.
And then we use this mountain method right afterwards.
So usually you see this at the end of this.
So you have to split it up into different parts
so that you can then create one or more components
with the component method.
Now, you pass along the name of the component.
And this is going to become a tag that you can use
in the HTML that's going to be using this component.
Now, these components become reusable
so that you can use them as many times as you want.
And the way that you call them
in the main template is something like this.
So say you create the app or you have this ID of app,
which is what you're mounting the application on,
and then inside that you can use this new name tag.
And then this tag will take care of outputting
whatever is in this template.
So let's take a look at a quick example.
So you can see that I've created
a button component right here.
This isn't a normal tag.
It's one that I just made up myself.
And what it does right now is output the code for the HTML
that would create eight buttons.
So you could see that.
It's not particularly useful right now
because all it's doing is outputting this button,
but at least I don't have to type in all the classes
that I would for the Bootstrap code.
And I can reuse this as many times as I want.
So if I just repeat it four times,
you'll see that I will eventually get four buttons.
That's the power of components,
that you can reuse them as many times as you want.
And they're also self-contained,
in that, if I wanted to use this on another project,
I could copy this component
and then just add it to another project as I needed to.
You can use almost every method
that you can use inside a regular application.
So for example, you can use data, computed, watchers,
methods, and also lifecycle hooks inside your components.
They can be nested.
So you can put one component inside another component.
And they can also be either global,
which means that it would apply to all of the items
inside your main application and also local
so that they only apply to a specific component.
We can also use what's called a props,
which is a short term for property.
And this looks like HTML properties.
So if you create a component like this,
you can pass along something to that component
by including the name of a prop.
And in this case, I'm using my prop.
And then passing along a value.
In the component, you receive it inside this props section
and then you list the property that you are passing.
Notice that in here, I'm using camel case.
And over here in the HTML, I'm using kebab case,
which has a hyphen and doesn't capitalize the second word.
So let's take a look at this example right here.
It's pretty similar to what we did before,
except that we have added a call to a property.
So we've added these props right here.
And we've got two of them,
a label prop as well as a type prop.
And so the label becomes what goes inside the button.
So I can change this to go right here.
And the type is the type of button
or the color that it's going to print as.
I'm using Bootstrap code here.
So if I put primary, it will be blue
or I can use warning in any of the other colors now.
And it becomes easier to change the buttons
by making a copy of it
and then changing all of these properties right here.
Now, you can see that I'm adding in the template,
a class parameter here.
So notice that this is similar to what we type up here,
except that the template is in one continuous string.
And here I'm using the keyword btn
and either of the type or if we didn't include a type,
then it's going to be the default color.
So actually the default color is secondary already.
So say that I wanted to not include a type on this one,
then the go button
would become the btn secondary class by default.
Passing along the hard-coded values
isn't always the most optimal thing.
So sometimes you want to pass along a series of values.
And you can do that using v-bind.
Of course, you can use the colon shortcut
and pass along a variable name from the data section.
So what I'm doing here is,
in the template,
I'm adding the prop that I'm getting pass over here.
And you'll see that when I show you the HTML.
I'm passing along with the v-bind notation, right?
But I don't have to put v-bind.
I just pretend that my prop is actually now
a v-bind statement with the name of the prop.
And then I can pass along here either a variable
or a method or some sort of expression calculation.
And when this gets passed to the sub-component,
then it gets passed along in the same way as a prop.
And the template can now use that prop,
which just makes everything a little bit more powerful.
So let's take a look at an example of this.
So now you can see that what I'm doing with this
is showing you a couple of things.
I'm building a component that is embedded
inside another component.
So just as before, I have my button component.
So this one lets you create a button.
And then I have a button group component.
So this is a special class in Bootstrap called btn-group.
And what you're doing here is you just add
a number of items in there.
And whatever items you add become the buttons.
And these buttons are being read from a list of items.
So I can create my buttons now
by adding and deleting items from this list.
And because it's a button group,
it's going to adjust the borders and put them side by side
and I can include the type that I want the button to be.
So now I'm creating something that is a lot more useful
than just passing along hard-coded values
by using properties
and by using the v-bind directive and buttons.
Let's try working on an example for this.
So if we take a look at the problem,
you'll see that it's exactly what we had before.
We have an application.
And we click on this to add items
to this dropdown menu here.
So I'm going to do something pretty simple
and it is going to take a few steps.
So even something kind of simple will sometimes.
What I want to do is modify the currency
so that I'm no longer using a method.
And so that it becomes a component that I can reuse
in multiple projects.
So this method that I have over here,
that's called currency.
If I wanted to use that in multiple projects,
it would be sort of convenient to have it
as its own separate thing.
So it's not going to look any different.
So if you look at the solution,
it's pretty much exactly the same.
It's just built in a different way.
Our pricing is going to be constructed using the component
in that section,
as well as here and even over here.
If you want to take a look at the difference,
you can take a look at this page right here.
And what we're going to do is first of all,
rewrite the app calls,
because remember, we have to separate the mounting
from the creation of the application.
And then we're going to create the currency component.
Finally, we're going to replace the template calls
with this new currency component,
and probably it'd be a good idea
to delete the code for that method.
So let's go ahead and go to the problem.
Let's go ahead and make this a lot bigger
so that we can just focus on the code.
So the first thing we'll need to do,
and this application gives you these nice triangles
that you can collapse things into,
we're going to need to separate the creation of the app
from the mounting of the app.
So what we'll do is we'll say
Vue.createApp at the top.
And then do constant here, App = Vue.createApp.
And into this app,
instead of using this variable,
we're going to just pass along all of these things.
So we're just going to cut all this out,
paste all that in there.
And before, we will have to say here, App.mount app,
and then in here we'll start creating our new components.
So we'll say app.component.
And this component is going to be called curr.
I know I could it currency,
but sometimes when I'm doing new things,
I like to call them slightly different names.
So I'll use props.
And so I'm going to use a prop called amount or amt.
And then also the template,
we'll just be using,
let's see, we'll do an expression here.
And we're going to output something called dollar.amt
using that amount that we'll receive.
And so that means that we need to create the method
for this dollar thing.
So we'll do a methods section.
And this needs a comma here.
In the methods section, we'll create dollar.
And dollar is going to receive a value from our application.
And then we're going to return a dollar sign,
pretty much what we had before.
So dollar sign
plus Number.parseFloat.
This is the same.
I could actually copy this from the previous section.
So let's just go ahead and copy this whole line
and paste it right here.
And now I don't really need to have this in here anymore.
So we'll get rid of it.
Hopefully our template is looking pretty good,
return all the stuff.
And then now,
I need to look for where I am using the currency,
which this is one place right here.
So let's take a look.
And instead of using this,
I'm going to use my new component.
So it should be curr
and we're going to use the amount property or prop
to pass along.
In this case, it's going to be our cartTotal.
And we'll need the close this out.
We'll also make sure that we have a quote right there.
It looks like we have an extra quotation right here.
Okay, so let's go ahead and copy this
over to the other places.
And here's another place.
And here, I'm going to remember that I'm using item.price.
So we'll just say here item.price.
And then we'll scroll down a little more.
And here, I'm using that currency again.
So I'll paste it.
And once again, I'm using item.price here.
So hopefully we did everything correctly.
Let's open up our section.
And you can see that it works exactly the same way.
You're not going to notice any difference,
except that now you have a component
that you can reuse in other applications
just by copying and pasting this code.