Vue?事件中的?.native你搞明白了嗎
native是什么?
.native - 監(jiān)聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。
官網(wǎng)的解釋:
你可能想在某個組件的根元素上監(jiān)聽一個原生事件??梢允褂?v-on 的修飾符 .native 。
通俗點講:就是在父組件中給子組件綁定一個原生的事件,就將子組件變成了普通的HTML標(biāo)簽,不加'. native'事件是無法觸發(fā)的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <button @click.native="clickFn">按鈕</button> </div> <script src='vue.js'></script> <script> new Vue({ el:'#app', data:{ }, methods:{ clickFn () { console.log('點擊按鈕了') } } }) </script> </body> </html>
此時點擊頁面中的按鈕無任何反應(yīng)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <card @click.native="clickFn">按鈕</card> </div> <script src='vue.js'></script> <script> Vue.component('card',{ template:'<p>這是card組件<button>按鈕</button></p>' }) new Vue({ el:'#app', data:{ state:false }, methods:{ clickFn (e) { console.log(e) //打印出MouseEvent對象 if (e.target.nodeName === 'IMG') { // 可以對點擊的target標(biāo)簽進(jìn)行判斷 this.dialogImageUrl = file.target.src this.dialogVisible = true } } } }) </script> </body> </html>
總結(jié): .native - 主要是給自定義的組件添加原生事件,可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽,并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的。
補充:vue中'. native'修飾符的使用
官網(wǎng)的解釋:
你可能想在某個組件的根元素上監(jiān)聽一個原生事件。可以使用 v-on
的修飾符 .native 。
通俗點講:就是在父組件中給子組件綁定一個原生的事件,就將子組件變成了普通的HTML標(biāo)簽,不加'. native'事件是無法觸 發(fā)的。
此時點擊頁面中的按鈕無任何反應(yīng)。
添加修飾符:
此時點擊就會彈窗:
可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽,并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的。
到此這篇關(guān)于vue 事件中的 .native你搞清楚了嗎的文章就介紹到這了,更多相關(guān)vue 事件.native內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題
這篇文章主要介紹了解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue2.0 http請求以及l(fā)oading展示實例
下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03