前面的话
父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件
事件绑定
每个 Vue 实例都实现了事件接口 (Events interface)，即
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件[注意]Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
[注意]不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定
<div id="example">
<parent></parent>
</div>
<script>
var childNode = {
template: `<button @click="incrementCounter">{{ counter }}</button>`,
data(){
return {
counter: 0
}
},
methods:{
incrementCounter(){
this.counter ++;
this.$emit('increment');
}
},
}
var parentNode = {
template: `
<div class="parent">
<p>{{total}}</p>
<child @increment="incrementTotal"></child>
<child @increment="incrementTotal"></child>
</div>
`,
components: {
'child': childNode
},
data(){
return {
'total':0
}
},
methods:{
incrementTotal(){
this.total ++;
}
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>命名约定
自定义事件的命名约定与组件注册及props的命名约定都不相同，由于自定义事件实质上也是属于HTML的属性，所以其在HTML模板中，最好使用中划线形式
<child @pass-data="getData"></child>而子组件中触发事件时，同样使用中划线形式
this.$emit('pass-data',this.childMsg)数据传递
子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据
this.$emit('pass-data',this.childMsg)父组件通过$on监听事件，事件处理函数的参数则为接收的数据
getData(value){
this.msg = value;
}
<div id="example">
<parent></parent>
</div>
