- [Instructor] When you create an event inside a component,
it can trigger something in the parent,
and it's also going to pass along some information.
Let's take a look at how that works.
So the effects of the component can be passed
along to the parent using a method called emit.
Now, you add this in the child template,
and then you can use a regular JavaScript event
like a click.
So this event can be anything here,
this could be a click or any other type of JavaScript event,
and that would trigger a custom event
that we're calling here at myEvent,
and optionally, you can pass along a value.
Here's what it looks like
when you call it in the parent component.
So this is what you do in the template,
and then this happens in the parent.
You actually call that event just
like you would a click event or any other event,
but this isn't the component call,
and then you can do something when that event takes place.
That means that you can execute a local method
or do something with a value that you have passed along.
So if you pass something, then when you do something here,
it can receive this value.
So this event is going to be emitted, right?
And it's going to send it to the parent, as I mentioned,
and then this value is going to be received optionally
into this method that you might call
with a special dollar-signed event value.
And as you can see here, I can do something
and this something can be really anything,
an expression or run a local function
in the parent component.
So let's take a look at how that works.
Now here, what I have is a couple of buttons,
and you'll notice that the first one lets you
just print out the words,
"The quick brown fox jumps over the lazy dog,"
over and over as I click it.
And then this other one, lets you take the same sentence
and just outputs word by word, the content within.
Once you get to the last word, it actually just
will say, "Undefined," but don't worry about that.
So let's take a look at how we're doing this.
We've got a couple of custom components,
they're really the same component,
I'm just passing along different labels.
So this one is called sentence,
that's the first button.
And this one has a label of by word,
and I am receiving the custom event right here.
This one is just taking some contents,
so it's receiving this dollar sign event,
and then modifying a local variable called display text.
And it's sort of adding whatever we received
from the custom event trigger,
and adding it to this variable.
So you'll see that display text
at the beginning has nothing
and we are printing that out right here in this paragraph.
So as I click on this sentence button,
it's going to pass along a value,
and it's going to add it to this display text,
which at the beginning is empty.
So let's take a look down here where
I'm creating the component.
Here's the component, it's called textBtn.
You can see here, there's the custom name of the component
in kebab case.
And this component has a piece of data,
just the sentence that you've seen over and over here.
And so when I click on this button, right?
Any of these buttons, actually,
it's going to emit a custom event called my event,
which we capture over here,
and then it's going to pass along
the text right here in this sentence variable.
That's going to be received
in this dollar sign event right here,
and it's going to, in the case of this one
just print out that text over here.
Now, here's where you can see that I have put the label,
that's why they have different labels
for each one of these buttons.
Now, the second button does something slightly different,
it's running a local method called by word,
and you can see that method right here.
So by word receives the text and modifies
the local display text variable,
the same one that we saw before,
and it's going to take the sentence splitted by spaces,
and then it's going to take this other variable
that starts with zero,
And then it's going to output each word one by one.
It's going to add a space at the end
so the words don't run into each other.
So the same button does a couple
of different things by passing along two things.
Now, interestingly enough, this event or this sentence
that I'm passing along is still received into this method.
Notice that I'm receiving it
into this text variable right here,
so that is still passing along the sentence
but it's not obvious because I'm not using,
you know, parentheses right here,
like you normally would in JavaScript.
And receiving something, it's going to
by default receive whatever variable would normally go
into this event variable, and it would pass it
along as the first element of this method,
and then it does its thing.
So pretty useful, you can see how I can create
different versions of these two buttons with this code.
So what if you wanted to use V-model with custom components?
Now, there's a little bit more setup
and you have to really understand what is going on.
Now, normally when you use V-model, you use it
in some sort of input field or some sort of form element,
and you add the name of a variable
that you are going to be working with.
And Vue.js is going to create this relationship
that when the variable updates or the input field updates,
the variable will update, or if the variable updates,
the input field will also update.
What's really happening behind the scenes
is that you are taking the value that is in the input field,
and passing along into this variable called myVar,
almost like a property.
And then you're creating an event
or you're sort of tracking the input event
into the input field, and you are making the value
that is in that input field, the target of this event.
So you're passing along the value of whatever's
in the input field into this variable as well.
So you're doing kind of two things right here.
The same thing is going to happen
when you use a custom component
and you're using V-model.
But you have to do it manually.
So what it's going to do is going to
create a variable called model value.
And it's going to create this update event
with the model value variable,
and then it's going to receive that event variable.
Sort of what we did right before with a component,
but it makes it a little bit harder to write,
I think this could possibly be improved,
and it's definitely something that you're going
to want to take a look at.
Now, in the custom component, you're going to
have to receive this variable called model value.
It is something that is going to be created,
it's not going to be obvious that it's there,
but you're going to have to receive it as a prop,
and then you're going to pass it along into the emit.
So this is sort of what it's going to look like,
what we did before.
It's just that when you're using V-model,
it's going to get a bit more complicated to do it.
So let's take a look at an example.
And in here, what we have is this really nice
and fancy input search from Bootstrap.
And what I can do here is, I can type something in,
and you can see that it shows it right here
in this section that I created.
So here I created, if the keywords variable exist,
then go ahead and show search for, and then kind
of display whatever you typed in that input field.
But the input field is a custom component
that I've called fancy search here.
Now, as far as you're concerned,
in this sort of custom input field,
you're doing the same thing that you would do
in a normal input field, you're passing V-model,
and then the name of the variable
that you want to keep track of.
When you create this component though,
you have to do all that kind of tedious, extra work.
You have to say,
"Input pass along as a prop the model value,"
receive the model value into a prop,
and then do that fancy thing
by emitting the model value again
and creating or passing along the event target value.
So this is just regular JavaScript
past the value of the event.
So it takes a little bit of understanding
of what is going on behind the scenes,
but you can see that you can still use
V-model when you use a custom component,
it's just a little bit harder to write.
You can also take a look at the documentation for this
at this URL if you want to get a little more
into these custom components.
They are really just a little bit more of a painter, right?
And I do wish that they were easier to build.
So let's take a look at an example.
And once again, I don't think this is going to
look very different than what we have done before.
So you can see the same sort of application,
and we've got the same setup.
We're going to simplify these things a little bit.
My goal is to grab this sort of section right here
that outputs the name, the description, the image
and the price, and this button right here,
and convert it into an event.
So again, let's get to it,
there's not a lot of sort of difference,
the solution is going to look exactly like it did before.
There's a lot going on here in the code.
And I've also taken time to simplify
the CSS a little bit for us.
You can take a look at the diff at this URL if you want to.
And so what we're doing is, we're going to
create a new component called product.
That product is going to emit an add to cart method
whenever we click on that plus button.
And finally, we're going to clean up the styles quite a bit,
it's not going to have those sort
of circle rounded edges and any
of that other fancy stuff as we start cleaning things up.
So let's start by going to this code for the problem.
And once again, I'm going to just make that bigger,
so we can take a look at the code itself.
So let's go ahead and start
by creating our custom component.
It's really nice that this sort
of editor lets you collapse things
because it's sort of annoying to see everything on screen.
So right here is where we have the currency component.
I'm going to add this component above it,
so I'll say, "App that component,"
and this one's going to be called product.
And then we're going to pass along some information in here.
So for props, we're going to be receiving an item, right?
So the item is going to be whichever thing you're displaying
in the cart.
And then we'll say that we want to emit
something called add to cart.
So you need to tell the component
what you are sending up the chain as well,
and you do that in this emits section.
And then we'll create a template,
and for the template, I'm not going to type this template,
I'm just going to borrow it or really take it out
of the section that has it up here.
So that is going to be around my before statement.
So it's going to include all this right here,
and let's see if we can collapse it.
Sometimes they're a little bit easier to grab,
sometimes if you collapse them, not so much on this one.
So I think we can just grab all this
and we will paste it in here, right?
And in this section, what we'll do is we will just
call that component that we are going to,
we've already named this thing product.
So as we go through this loop, and here, I'm going to say,
"Get the product custom component and pass
"along the current item as the prop."
So we'll say item here, and this is going to
expect a add to cart custom event,
and this is going to call an add to cart method.
And then we're going to close product here,
and we already have the add the cart method created, right?
It's the same method that we had before,
we're not really doing anything with it,
we're just leaving it there also.
And let's take a look at, we're going to need to
rewrite some of this content here,
because instead of the event being in this component,
it's going to be in the parent component.
All right, so this button is going to
on a click event, it's going to now emit
the add to cart method and pass along the item as well.
And everything else is going to be similar here.
Let's see if we haven't made any mistakes.
Then when I click on these things,
it should work exactly like before.
So it's working pretty well.
And as I mentioned, I do want to clean things up,
so I'm going to get rid of this border style thing here.
Because right now, so you can see
that it's not even working right now
because border style is a variable
that is in the parent component.
So I could move that stuff all in here,
but honestly, I think it looks fine.
I mean, I was showing you how to work
with those sort of custom classes before,
so I don't really need any of that stuff.
So we're just going to get rid of it.
And I think it's actually, some
of it is on the JavaScript here.
So I'm actually going to get rid of a bunch of this code.
Not even doing labels anymore,
and I'm going to leave the maximum, the cart,
display cart as well and products.
That's going to be the only thing that I need to do here.
I'm also going to get rid of some of these methods
that I no longer need.
So let's see, transition color and reset color,
we don't really need that anymore.
See if there's any computer, this cart button,
we don't really need anymore.
We still do need filter buttons here.
So we'll get rid of this,
and I think that's pretty much all we need to get rid of.
Let's take a look at our app and making sure
that it still does what it's supposed to do.
I think I may have missed something.
I need to add a regular color for this button,
before it was kind of doing things
where it calculated the amount of items.
So I just need to clean that up.
That was, let's see the cart button,
BTN, we'll do a search.
And then here, we're going to get rid
of this and just hard-code the class
as BTN success, I think it will be the green one.
Oh, it looks like it just had three Cs on that success
and you can see now that the button
is working just as before.
And that's all we needed to do, a little bit of cleanup,
and then by adding this new component, once again,
we're taking things out of the main component,
and creating sub-components that we can use,
and can also make our code a little bit easier
and simpler to read.
Your application is going to always end
up being a sort of smaller main app with a bunch
of little components that do whatever you need to do
for that part of your application.