vue中父子组件绑定事件

父子组件绑定事件：

注意：父组件是自定义事件，由子组件传递触发事件信息；子组件是系统事件比如：click等

[code]    <div id="app">
<counter @handle="fatherEvent"></counter>
</div>
<script>
var counter = {
template: `<div @click="sonEvent">hello</div>`,
methods: {
sonEvent(){
console.log("sonEvent")
this.$emit('handle')
}
}
}
var vm = new Vue({
el: '#app',
components: {
counter
},
methods: {
fatherEvent(){
console.log("fatherEvent")
}
}
})
</script>

2. 监听父组件的系统事件（.native修饰符）

[code]    <div id="app">
<counter @click.native="fatherEvent"></counter>
</div>
<script>
var counter = {
template: `<div>hello</div>`,
}
var vm = new Vue({
el: '#app',
components: {
counter
},
methods: {
fatherEvent(){
console.log("fatherEvent")
}
}
})
</script>

当点击 时，会触发父组件上的click事件，打印