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