最近在阅读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 方法
（我是这样理解 如果有不对 还请大家指正 感谢❤️
