Component Events with emit

[00:00:00]
>> Let's communicate some events with emit. Emit is a way to tell, report, activity from the child to the parent. So far, we're doing props down, we're explaining everything from the parent has all the control and it's telling the child about things. But what if the child has to report its duties to the parent?

[00:00:21]
What if we need to change something based on the child? Well, the child doesn't change it, right? We're not mutating that prop on the child. We're communicating to the parent, hey, something's changed. And the parent will go up, okay, thank you, I'll update. So why do we do this?

[00:00:39]
Because we want a one-way flow of data, so there's only one source of truth, right? We mentioned that a little bit earlier. We don't want multiple things happening all over the place that are totally different from one to another. We want to make sure that we really have just one thing that we're working with here and that it's getting doled out to other places.

[00:01:00]
This is just one way of doing it, I'm gonna show you emit now. But later today we're gonna talk about the Composition API, that's another way of doing this. And we're also gonna talk about Vuex, which is yet another way of doing this. So consider this one tool in your tool belt.

[00:01:17]
And I will discuss, a little bit, the differences between when you'd want to pick one over the other. So here we've got our where is my taco and my click me to order a taco. I'm gonna open this as a CodePen again. So we've got our get taco in text.

[00:01:37]
We've got our script type x-template, which now you're pros at, you know that this order button is going to be making association with a component. And on this button, when we click, We're gonna say $emit and pass into gettaco. Remember I said earlier, when you see a dollar sign, that's something that the view instance has in particular, that has to offer us.

[00:02:02]
So when I click this emits, this changes to taco. So in our methods we have, on the parent, updateTaco this.text. So the parent is making that change, even though the button was clicked on the child. So this button was clicked on the child. This template is pretty bare, right?

[00:02:22]
There's not a lot of things going on here. We don't even have a prop coming down or anything. It's just a button, we have an order button. It's just a button, it has no state of its own. We are saying @click=$emit, so I'm telling the parent emit please, do something with gettaco.

[00:02:41]
And then you can see on that component @gettaco, so it's @gettaco. So we're calling this and then I'm saying updateTaco, which I have a method for here. You can name them the same thing. I named them different things so that you can see the difference. So that you can see which one is is firing which, right?

[00:03:05]
So again, we're emitting gettaco, that calls this special click event. And we're gonna fire a method there, and that method could do anything. But the parent is the one changing it, not the child. Does that make sense to everyone? Any questions so far? Great, we have just another piece of review here, we've got our myevent, and then this is the parent handler.

[00:03:35]
We can also pass in a parameter. So if we, let's say we need to report something to the parent, but we also need to tell the parent something about itself. Like if we had that backpack counter, and we had that data on the backpack counter and we wanted to tell the parent, I got a count of four.

[00:03:52]
We could pass that four in as a parameter and it could say, hey, update this manifest file with that four, so we're able to pass parameters as well. So here's this with a parameter. I'm gonna open this up. We've got our number of tacos and we're gonna add a million tacos, all the tacos.

[00:04:15]
And then we've got, again, this ability to say on the child, does child has its own state? In this instance, I'm not updating the parent yet, right? I'm just in the child, holding that numtacos. And then as soon as I say, click me to order a taco, I say gettaco.

[00:04:37]
I'm emitting get taco with the number of tacos. And I say gettaco and that's gonna go to updateTaco here. And updateTaco passes in the numTaco from the child. And then it's gonna say this.text = You ordered $(numtaco). If we want to look at this in Dev Tools, We have Vue over here.

[00:05:05]
We have our component, you see the numtacos. The route has the text, where is my taco, it's not holding numtaco. We are adding tacos, adding tacos. Now we click this and then we go back to the route. And you can see that the text has changed on the parent.

[00:05:26]
>> Is it a bad practice to pass a function into a child through a prop instead of using emit? So that the child component would have access to the scope of the parent?
>> You can, although I would say that if you're gonna add more functionality, that's when I start to use things like Vuex or Composition API.

[00:05:50]
Because you just have a lot more that you can work with, you're not passing a huge amount of information around. So you can, I mean, you can pass that kind of data around. Although when we start to get into Composition API and Vuex, you're gonna start to see how there's a lot more available to you in terms of changing that data from the child to parent or siblings as well.

[00:06:16]
Here is a kind of goofy CodePen. I'm starting this ball bouncing, and I'm just increasing the height and the ball will continue to bounce and I can increase the radius as well. And it's a pretty simple @heightincrease = incrementHeight, radiusincrease = incrementRadius. And you can see those methods on the parent are this.total and I'm increasing the radius.

[00:06:40]
And the ball bouncing from the height counter. And the height counter is adding the height to that count that we have. But it's also emitting for the parent to understand it. But I also wanted to show this because I wanted to show that emit doesn't have to be passed through that click handler.

[00:06:59]
Remember we can say this.emit inside of a function if you want to do more functionality there.