Vue.js 中v-on自定义事件不是很理解！

Question

我在官网中看到使用 $on来监听事件，$emit触发事件。但是下面这句话我不是很理解，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

<div id="counter-event-example">

  <p>{{ total }}</p>

  <button-counter v-on:increment="incrementTotal"></button-counter>

  <button-counter v-on:increment="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('increment')

    }

  },

})

new Vue({

  el: '#counter-event-example',

  data: {

    total: 0

  },

  methods: {

    incrementTotal: function () {

      this.total += 1

    }

  }

})

这是官网的例子，v-on:increment='incrementTotal' 这句话我的理解是如果increment触发的话，就会触发incrementTotal 但是总感觉不对，请问各位 应该怎样理解？