關(guān)于vue中@click.native.prevent的說明
更新時(shí)間：2022年03月08日 10:07:48 作者：不丸子
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于@click.native.prevent的說明
元素中綁定了這個(gè)事件
<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綁定組件的時(shí)候，需要加一個(gè)native,不加的話會(huì)被認(rèn)為是要監(jiān)聽item里面的自定義事件，（顯然我們這里不需要）
- 加prevent，是用來阻止默認(rèn)事件的，相當(dāng)于Jquery里面的event.preventDefault（）方法阻止元素發(fā)生默認(rèn)的行為。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue中實(shí)現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對退出全屏的監(jiān)聽，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下2023-08-08
使用vue-print-nb打印el-table問題總結(jié)
這篇文章主要介紹了使用vue-print-nb打印el-table問題總結(jié),通過實(shí)例代碼介紹了vue-print-nb 打印功能,本文結(jié)合實(shí)例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
antd日期選擇器禁止選擇當(dāng)天之前的時(shí)間操作
這篇文章主要介紹了antd日期選擇器禁止選擇當(dāng)天之前的時(shí)間操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
如何利用vue-cli監(jiān)測webpack打包與啟動(dòng)時(shí)長
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測webpack打包與啟動(dòng)時(shí)長的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
vue中el-table和jsplumb實(shí)現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實(shí)現(xiàn)連線功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
今天小編就為大家分享一篇淺談vue中組件綁定事件時(shí)是否加.native，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vm.$attrs使用場景詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03