Vue之emit

最近在阅读Vue官方文档，准备上手Vue，在读到组件这一节的时候，对绑定自定义事件的代码有一些疑惑，直接上代码

<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>

这里注意到 v-on:increment,因为之前读文档的时候只见过 v-on:click/submit 等，所以对冒号后面的 increment 感到陌生不知道它的作用。
在这里我推荐所有和我一样的新手，如果反复地阅读之后还是存在困惑，那就直接把代码撸到ide上自己实践，修修改改一番或许就会产生许多感触。

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

通过自己的实践，发现这段代码的意思就是，首先在子组件中点击触发 incrementCounter 方法，然后在 incrementCounter 方法中，通过 this.$emit("increment") 来触发父组件中的 increment 同时父组件中 increment = incrementTotal 将‘increment’ 和 incrementTotal 方法绑定，所以即触发 incrementTotal 方法
（我是这样理解 如果有不对 还请大家指正 感谢❤️