關(guān)于vue中@click.native.prevent的說明
關(guān)于@click.native.prevent的說明
元素中綁定了這個事件
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登錄</el-button>
1、在封裝好的組件上使用,所以要加上.native才能click。
2、prevent是用來阻止默認(rèn)的事件。就相當(dāng)于…event.preventDefault(),父組件想在子組件上監(jiān)聽自己的click的話,需要加上native修飾符。
vue的@click.native.prevent,點擊事件加上native.prevent有什么用呢
在項目發(fā)版的總結(jié)過程中,突然看到@click.native.prevent,很好奇它的用法,一開始還以為是element-ui里面自帶了,看了之后也沒有啊,上網(wǎng)搜集了資料,打算記錄下來。
代碼如下
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native.prevent="handleAgencyRelationship(row)">代理關(guān)系處理</el-dropdown-item> </el-dropdown-menu>
elment-ui
我們項目的業(yè)務(wù)場景的點擊事件,是不需要用到按鈕的,所以我們需要用到的是原生的vue點擊事件。而加native.prevent的精髓就在此
- 給vue綁定組件的時候,需要加一個native,不加的話會被認(rèn)為是要監(jiān)聽item里面的自定義事件,(顯然我們這里不需要)
- 加prevent,是用來阻止默認(rèn)事件的,相當(dāng)于Jquery里面的event.preventDefault()方法阻止元素發(fā)生默認(rèn)的行為。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-07-07使用vue-print-nb打印el-table問題總結(jié)
這篇文章主要介紹了使用vue-print-nb打印el-table問題總結(jié),通過實例代碼介紹了vue-print-nb 打印功能,本文結(jié)合實例代碼講解的非常詳細,感興趣的朋友一起看看吧2024-01-01如何利用vue-cli監(jiān)測webpack打包與啟動時長
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測webpack打包與啟動時長的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02vue中el-table和jsplumb實現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實現(xiàn)連線功能,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07