绑定原生事件
<div id="root">
<child @click="handleClick"></child>
</div>
Vue.component('child',{
template:'<div @click="handleChildClick">content</div>',
methods: {
handleChildClick(){
alert('click child')
this.$emit('click')
}
}
})
let vm = new Vue({
el: '#root',
methods: {
handleClick(){
alert('click')
}
}
})
当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的click
事件,如果想触发自定义的click
事件,在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。
在元素上绑定的事件,监听的是原生事件,在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()
来触发。
在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件,该怎么做呢?
<div id="root">
<child @click.native="handleClick"></child> //native 是事件修饰符
</div>
Vue.component('child',{
template:'<div>content</div>',
})
let vm = new Vue({
el: '#root',
methods: {
handleClick(){
alert('click')
}
}
})
这个时候,在组件上面做事件的监听,并不是自定义事件,而是一个原生的click
事件,只要在事件绑定的后面加上一个native
这样的事件修饰符就可以了。