Two things call the same name! Components -> Custom Events -> Demo Code

[lanezhao]

https://vuejs.org/v2/guide/components.html#Custom-Events

https://cl.ly/lmVk

In this demo code, Two things call the same name(variable name). This will make the new learners very confusing.

In the screenshot. Orange mark are Event , Red Mark are Event Handler . They are completely different things. But was called the same name.

The logic of the code should be:

In the button-counter component inside, The (1) click Event triggered (2) increment Event Handler, then the (3) increment Event Handler use $emit to triggered the Vue instance's (4) increment Event, then the (5) increment Event triggered the Vue instance's (6) incrementTotal Event Handler.

These are so confused! Maybe someone can understand, But many new people can not understand that two things are different. Perhaps the following code will be more clearer.

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:comp-change="incrementTotal"></button-counter>
  <button-counter v-on:comp-change="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter  = 1
      this.$emit('comp-change')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total  = 1
    }
  }
})