關(guān)于vue中@click.native.prevent的說明
更新時間：2022年03月08日 10:07:48 作者：不丸子
這篇文章主要介紹了關(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，點(diǎn)擊事件加上native.prevent有什么用呢
在項(xiàng)目發(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
我們項(xiàng)目的業(yè)務(wù)場景的點(diǎn)擊事件，是不需要用到按鈕的，所以我們需要用到的是原生的vue點(diǎn)擊事件。而加native.prevent的精髓就在此
- 給vue綁定組件的時候，需要加一個native,不加的話會被認(rèn)為是要監(jiān)聽item里面的自定義事件，（顯然我們這里不需要）
- 加prevent，是用來阻止默認(rèn)事件的，相當(dāng)于Jquery里面的event.preventDefault（）方法阻止元素發(fā)生默認(rèn)的行為。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue安裝和使用scss及sass與scss的區(qū)別詳解
這篇文章主要介紹了vue安裝和使用教程，用了很久css預(yù)編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點(diǎn)尷尬，感興趣的朋友一起看看吧2018-10-10
這篇文章主要介紹了vue更改頭像功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了詳解vue移動端項(xiàng)目代碼拆分記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手試一試2023-10-10
本文主要介紹了element可編輯表格驗(yàn)證問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章介紹了vue中過濾器的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
相信tab切換對于大家來說都不算陌生，后臺管理系統(tǒng)中多會用到。如果不知道的話，可以看一下瀏覽器上方的標(biāo)簽頁切換，大概效果就是這樣。2021-05-05
Vue使用konva實(shí)現(xiàn)一個簡便的流程圖
日常開發(fā)中我們可能碰到流程圖的需求,實(shí)現(xiàn)流程圖的庫有很多,如果我們想要實(shí)現(xiàn)一個簡便的流程圖可以使用konva庫來實(shí)現(xiàn),下面我們就來看一下具體的實(shí)現(xiàn)過程,需要的朋友可以參考下2023-08-08
SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互,結(jié)合實(shí)際案例,說明了如何實(shí)現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價值,感興趣的可以了解一下2023-08-08