正文
vue2.0中v-on绑定自定义事件的理解
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。
每个Vue实例都实现了【事件接口】，即：
1、使用 $on(eventName) 监听事件
2、使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
html代码：
<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>
css代码：
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
}
}
})
在子组件里面把点击事件（click）绑定给了函数increment。点击子组件的按钮将会触发位于子组件的increment函数。
this
.$emit(
'increment'
)
这是触发当前实例上的事件。附加参数都会传给监听器回调。
子组件在调用了increment函数的时候，通过$emit来通知父组件。这样就形成父子组件间的相互呼应传递信息。
在平常的组件通讯，父组件是通过props参数对子组件进行传递，而子组件向父组件传递则可以使用自定义事件了。
这样，父组件和子组件已经解耦，子组件收到的是父组件内部的实现
