綁定原生事件
<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
這樣的事件修飾符就可以了。