首先我們定義一個 child 組件，什么事件都不綁定，代碼如下：

Vue.component('child', {template: '<button>click me</button>'})// 然后我們在根組件中使用它，代碼如下：<div id="app"><child></child></div>new Vue({el: '#app'})

正常情況下，我們點擊 按鈕 什么都不會發生對吧？
好，接下來呢，我們給 child 組件增加一個 @click 事件，代碼如下：

<div id="app"><child @click="handleClick"></child></div>

那么，這個 handleClick 方法是誰的呢？不用問，當然是父作用域下的方法啦，所以我們在根組件中增加一個方法，代碼如下：

new Vue({el: '#app',methods: {handleClick () {alert('hello,world!')}}})

可是呢，當你再次點擊按鈕的時候發現，沒有 hello, world! 沒有彈出，也就是說 handleClick 方法根本沒有執行。別急！這個時候 .native 修飾符就派上用場了，我們在 @click 加上這個修飾符試試，代碼如下：

<div id="app"><child @click.native="handleClick"></child></div>

再點擊一下看看效果吧！是不是就出來了？ .native 修飾符的官方解釋是： 監聽組件根元素的原生事件！
當然，如果不用 .native 修飾符，我們也可以通過 $emit 事件派發給父組件也是可以的，代碼如下：

<div id="app"><child @click="handleClick"></child></div> // .native 修飾符 demoVue.component('child', {template: '<button @click="click">click me </button>',methods: {click () {this.$emit('click', 'i from child...')}}})new Vue({el: '#app',methods: {handleClick (val) {console.log(val) // 'i from child...'}}})

總結

以上是生活随笔為你收集整理的vue将原生事件绑定到组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。