So, at this point, we've kind of got the basic concept of components. Components now start, as we start to get more functionality inside of components, it starts to get a little bit more complicated. And if we looked at the documentation here, we're on components and we did, what are components, using global, local, DOM, props, literal versus dynamic, one-way data flow, prop validation. Custom Events now is where we're at. And you can see there are a couple more sections to explore.
These do get more complex as we go though, as what they're doing is a little bit more advanced. So, using v-on with Custom Events, they listen to an on event and a trigger, which triggers an emit event. And it's important to note if you're familiar with the event target API inside that comes with JavaScript or the web browser is used for processing the JavaScript, theirs is different. It works kind of the same way, but it's not an alias. I'm just letting you know about that.
In addition, a parent component can listen to an event emitted from a child component using v-on. So, this notion of on is basically getting your components to talk to each other or talk to its parent and that's the start of it. So, here's an example, div id counter event example and it has a total. And then we have two buttons. So, button-counter, v-on, increment, incremental total, button-counter. And then button-counter, v-on, increment, incremental total, button-counter, so two of the identical components. And now if you look at the component that makes up that code, it's vue component, button-counter. Template is button, v-on, click. So, think of that as the same as that @click or v-on, click, equals increment counter.
So, let's grab this code and actually implement some of this. So, we can see as a better example. So, we're going to go and paste this inside of our example, then we'll grab our Vue.js code down here and paste this into the component code that we had previously. And then we have... they're referencing counter event example and they have [inaudible 00:02:21] data, total and methods.
I'm just going to grab the data, total and methods. So, data, total and methods, we'll replace that code there. So, app, new, view, element, app, data, total, bracket, comma. And again, this is closing the data. So, let's line this up so it looks clear. And then we're specifying methods and then it's going to increment total and then that's our code there. So, and then this is what you're going produce.
So, if we were to go look at this and refresh, if we click on the button here, it adds to the value. If we click on this button, it's keeps its value, but also adds to the total value. So, let's take a look at how this is working. So, here's our button, on click, increment counter. So, here's the method that belongs inside the component. So, increment counter, this'll be the same as that @click, increment counter. Take this dot counter, plus equal one. Well, that's pretty basic, right? Plus equal one just adds one to it.
Now, this dot counter is the value here, so it just adds one. So, this dot counter, plus one. No problem, right? Basic button adding one, two, three, four, five, however many it goes. Shouldn't be anything new there.
Now, what is new, if we look at the element here, is this dot emit increment. Now, look up top here, it says v-on dot increment. This is the same as this. So, increment, right? We need to go and say v-on and then increment here a value, is then taken as the total here. So, v-on, increment, increment, total. The increment then gets passed as the value that it's going to receive, increment total. So, here's increment total, increment total is this method. It takes this dot total and goes plus one, all right?
So, whenever we hit this button, return the counter, plus zero, this data emit increment, which increments the increment value, which is the increment total, which then applies the increment total method, which adds by one. And that's what we get to values.
So, you can see it's changing the actual parent value, right? It's changing the value of total, but we took total and we passed in increment total, which is the method so we could do something with it. And that gets connected via increment, which is the data that gets admitted here. So we admit this method or we say emit, it's not really a method. This here, property, which is the method increment, total, which again, then goes and runs this from its value.
So, you can see that, you might need to go through that a couple of times as it is a little bit confusing, right?
To get that going again, that's v-on increment. It's almost kind of a reverse I think in a way for me. I think I would have easier time understanding if increment total was this value. So, if you think about this just as increment total, which is the value here, right? So, think about that as, I hit the button, it calls this value here. It takes the value and it sends the value here based on this dot emit, which is the return value, which is the count. And then it calls this and then runs through.
So, again, you might need to go through that. You might need to play with the example to kind of understand that concept as this is a I think a very difficult, one of the most difficult concepts inside view.