vue中的@click.native 原生點(diǎn)擊事件
更新時(shí)間：2022年04月22日 09:21:51 作者：有時(shí)間織個(gè)毛衣
這篇文章主要介紹了vue中的@click.native 原生點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
@click.native原生點(diǎn)擊事件
給vue組件綁定事件時(shí)候
必須加上native ，不然不會(huì)生效（監(jiān)聽根元素的原生事件，使用 .native 修飾符）
等同于在自組件中
子組件內(nèi)部處理click事件然后向外發(fā)送click事件：$emit("click".fn)
vue點(diǎn)擊事件補(bǔ)充.native
發(fā)現(xiàn)vue中加載Element 之后 鍵盤事件無效果搜索之后發(fā)現(xiàn)有BUG特來修復(fù)
步驟
發(fā)現(xiàn)Element-input 中加入@keyup.enter中無效果
<el-input style="width:500px;" placeholder="請(qǐng)輸入查詢城市" v-model="location" clearable @keyup.enter="goSearch" ></el-input>
之后在加入.native 的修飾符
<el-input style="width:500px;" placeholder="請(qǐng)輸入查詢城市" v-model="location" clearable @keyup.enter.native="goSearch" ></el-input>
官網(wǎng)的解釋
?你可能想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件。可以使用 v-on 的修飾符 .native 。
?通俗點(diǎn)講：
就是在父組件中給子組件綁定一個(gè)原生的事件，就將子組件變成了普通的HTML標(biāo)簽，不加’. native’事件是無法觸 發(fā)的。
可以理解為該修飾符的作用就是把一個(gè)vue組件轉(zhuǎn)化為一個(gè)普通的HTML標(biāo)簽，并且該修飾符對(duì)普通HTML標(biāo)簽是沒有任何作用的。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何實(shí)現(xiàn)vue加載指令 v-loading
在日常的開發(fā)中,加載效果是非常常見的,但是怎么才能方便的使用,本文介紹如何實(shí)現(xiàn)vue加載指令 v-loading,感興趣的朋友一起看看吧2024-01-01
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明的相關(guān)資料,這個(gè)錯(cuò)誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類型聲明文件,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
眾所都知vue是一個(gè)單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue單頁面改造多頁面應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue?3中引入了組合式函數(shù)編程方式，可以更好地實(shí)現(xiàn)代碼的復(fù)用和可維護(hù)性。通過定義可組合的函數(shù)，可以將組件的邏輯和狀態(tài)進(jìn)行拆分和組合，實(shí)現(xiàn)更靈活的代碼組織方式。同時(shí)，組合式函數(shù)也支持響應(yīng)式數(shù)據(jù)和生命周期鉤子函數(shù)，更加貼近Vue開發(fā)的實(shí)際場(chǎng)景2023-05-05
Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04