Vue 中給組件綁定原生事件

綁定原生事件

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