Vue 中給元件繫結原生事件

摘要： 繫結原生事件 <div id="root"> <child @click="handleClick"></child> </div> Vue.component('child',{ ...

繫結原生事件

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