Vue：v-on自定义事件

　　Vue中父组件使用prop向子组件传递数据，那么子组件向父组件使用什么方式传递信息：自定义事件。

　　1.先来看官网上面教程

 

　　每个 Vue 实例都实现了事件接口，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName, optionalPayload) 触发事件

<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="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
 }
 }
})

   2.功能解释:

　　当子组件click出发一个效果，子组件事件（incrementTotal）命名为"increment"放入父组件中触发（$emit('increment')）。
　　以下为个人理解：子组件的事件（incrementTotal）是独立不可共享的，使用事件绑定（v-on）给子组件事件包装一层可以被父组件接收的外衣，
实际上父组件还是要使用子组件事件（incrementTotal），当然其内部逻辑可自定义。

以上内容为个人学习所感，如有错误请指正，勿喷。