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 这样的事件修饰符就可以了。