Vue?事件中的?.native你搞明白了嗎
native是什么？
.native - 監(jiān)聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。
官網的解釋：
你可能想在某個組件的根元素上監(jiān)聽一個原生事件?？梢允褂?v-on 的修飾符 .native 。
通俗點講：就是在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標簽，不加'. 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>此時點擊頁面中的按鈕無任何反應。
<!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標簽進行判斷
this.dialogImageUrl = file.target.src
this.dialogVisible = true
}
}
}
})
</script>
</body>
</html>總結： .native - 主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽，并且該修飾符對普通HTML標簽是沒有任何作用的。
補充：vue中'. native'修飾符的使用
官網的解釋：
你可能想在某個組件的根元素上監(jiān)聽一個原生事件?？梢允褂?nbsp;v-on 的修飾符 .native 。
通俗點講：就是在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標簽，不加'. native'事件是無法觸 發(fā)的。
此時點擊頁面中的按鈕無任何反應。
添加修飾符：
此時點擊就會彈窗：
可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽，并且該修飾符對普通HTML標簽是沒有任何作用的。
到此這篇關于vue 事件中的 .native你搞清楚了嗎的文章就介紹到這了,更多相關vue 事件.native內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于如何解決vue3報錯:找不到模塊或其相應的類型聲明的相關資料,這個錯誤提示是指在代碼中引用了Vue模塊,但是系統找不到該模塊或者缺少相應的類型聲明文件,需要的朋友可以參考下2023-07-07
本文主要介紹了Element框架el-tab點擊標簽頁時再渲染問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
父子組件通信是Vue中常見的場景,這篇文章主要為大家詳細介紹了vue中父子組件相互傳值的實現方法,文中的示例代碼講解詳細,需要的小伙伴可以參考一下2023-12-12
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關資料,公司項目監(jiān)聽系統中發(fā)現一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
vue項目無論是用element中的Select選擇器,還是使用公司維護的組件,都可以輕松實現單選和多選的需求,這篇文章主要給大家介紹了關于Vant彈出列表多選輸入框下拉選擇的相關資料,需要的朋友可以參考下2024-01-01
vue-cli項目代理proxyTable配置exclude的方法
今天小編就為大家分享一篇vue-cli項目代理proxyTable配置exclude的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue實現跨域的方法,結合實例形式分析了vue.js跨域的原理與相關實現技巧,需要的朋友可以參考下2019-05-05
element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:"
在日常開發(fā)中,我們會遇到一些情況,限制日期的范圍的選擇,下面這篇文章主要給大家介紹了關于element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:?"placement"的解決方式,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了詳解搭建一個vue-cli的移動端H5開發(fā)模板，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要給大家介紹了關于Vite內網ip訪問的2種配置方式,文中通過實例代碼介紹的非常詳細,對大家學習或者使用Vite具有一定的參考學習價值,需要的朋友可以參考下2023-07-07