在父组件使用prop 传递数据给子组件，子组件则是通过事件传递数据给父组件的。
Vue实例都会实现事件接口：
1.使用$on(eventName)监听事件;
2.使用$emit(eventName,optionalPayload)触发事件；
父组件可以在使用子组件的地方直接通过v-on在监听子组件触发的事件。
注意：
不能用$on来监听子组件释放的事件，而是必须在模板里直接用v-on绑定。
例子：
<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
}
}
})
目的
这样子的代码使得父组件与子组件进行了解耦，让数据在各自的作用域内进行操作。
.sync 修饰符
.sync 修饰符功能在2.3版本之后，作为一个编译时的一个语法糖，它会被拓展为一个自动更新的父组件属性的v-on的监听器。
