- [Instructor] And the sub-component that we created,
where we are listing the products,
we're actually already managing some local events
in the JavaScript.
If we--
Let's go ahead and close the price component.
In this product list component,
we have a series of methods here.
And the methods are actually referring to events
that are handled locally.
Before enter, enter and leave,
are methods that are being used by our transition group,
and they're right here.
So this is how you take care
of working with events inside a component,
just like you would inside the main view object.
But what if we want this component to send something
to its parent component?
And where we're going to do that
is by hitting this plus sign,
we want to add an item into the cart.
To do that, it requires a slightly different notation,
and it's actually pretty easy.
So that is handled by emitting an event from this component,
and then catching it in the previous component.
So it's going to essentially allow this sub-component
to emit an event as if it were happening
in the previous component.
So we need to find the place where we have
the on:click command.
So that addItem happens right here,
and it's the same thing,
and let's go ahead and switch this to the shortcut.
So instead of v-on, we can use @click, it's the same thing.
And what we want to do is pass along,
using the dollar sign and emit command,
and then in here--
Let's go ahead and hide the stuff on the side.
It's kind of annoying when it refreshes a whole bunch.
And so, right after we emit,
we want to specify what we want to emit.
So I could call this addItem,
but I'm just going to call it add.
And then, what we want to do is pass along the element
that we want to send.
So this is sort of weird, because you may be thinking,
we could sort of do this,
but the notation is a little bit different.
You just pass along the name of the event,
and then you pass along the item.
This could be an object here, as well.
So it does require a slightly different notation.
Let's go back into our main component, now.
Because we need to catch that event.
So, I'll collapse that, and we'll need to pull up the HTML.
The same place where we are setting up the props here.
We're going to add something that catches that event,
and it happens just like you would suspect.
It's technically an event that happens
in this sub-component.
So we call that event add, and then this event,
it's going to trigger something inside
the main view component.
And if you remember, that method is called addItem.
And actually we don't really even need to specify
what we're passing it, because the way that we are writing
the emit statement, it's going to automatically pass
a value along to addItem.
And our addItem JavaScript is already going to catch that.
So let's go to addItem.
Notice that it expects a product.
Well, we're passing that along already.
So, you just sort of have to get used to that notation,
but you'll see that now.
Once we learned how to emit the event properly,
it works just like before.
The lead is still working just fine, as well.
But by changing how we call the event
within the sub-component, we're able to trigger something
in the parent component.
And that's really useful, because oftentimes,
we need to pass more than just properties,
we need to be able to pass events, as well.