Vue事件中如何獲取原事件參數(shù)
更新時間：2024年12月26日 09:09:58 作者：-小龍人
文章介紹了如何在Vue中通過Click方法獲取原事件的參數(shù),包括默認參數(shù)、自定義參數(shù)以及如何同時獲取原生事件和自定義參數(shù)的方法
Vue事件中獲取原事件參數(shù)
以Click方法為例，如何知道Click方法原事件中含有哪些參數(shù)？
1. 一般用法，不傳參數(shù)
<el-button @click="testClick">Click事件</el-button>
testClick(){
console.log('Click事件觸發(fā)了...')
}
這種情況下vue對事件的處理會自帶一個event事件，可查 VUE API 文檔。
<el-button @click="testClick">Click事件</el-button>
testClick(event){
console.log('event')
}
2. 猜測默認參數(shù)
當你不知道默認配置幾個方法時，可以先試試幾個，如果有就繼續(xù)往下嘗試
<el-button @click="testClick">Click事件</el-button>
testClick1(a,b,c){
console.log(a,b,c)
},
結果如下截圖：
click默認參數(shù)就一個，其他兩個都是undefined，如果不是underfined可以繼續(xù)加入?yún)?shù)去嘗試。
3. 當我們在事件中傳入自己的參數(shù)
比如想點擊這行數(shù)據(jù)，傳入行ID刪除數(shù)據(jù)時，這時發(fā)現(xiàn)找不到了事件原生參數(shù)
<el-button @click="testClick(1)">Click事件</el-button>
testClick1(a,b,c){
console.log(a,b,c)
},
結果如下截圖：
這里還是用了上面猜想?yún)?shù)的方法，可以看到找不到了事件原生參數(shù)了。
4. 在事件中編記原始參數(shù)
$event 即可在傳自定義參數(shù)同時拿到原生事件參數(shù)
<el-button @click="testClick(1,$event)">Click事件</el-button>
testClick1(a,b,c){
console.log(a,b,c)
},
結果如下截圖：
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0 watch里面的 deep和immediate用法說明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue.js是一款流行的前端框架,它的路由管理器Vue Router是實現(xiàn)單頁面應用功能的重要組成部分,在構建SPA的過程中,我們經(jīng)常需要在不同的路由之間傳遞參數(shù),Vue Router提供了兩種主要的參數(shù)傳遞方式query和params,下面將詳細介紹這兩種方法的避坑指南2025-07-07
這篇文章主要介紹了Vue組件之單向數(shù)據(jù)流的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了Vue3組件間的通信方式，在使用vue時，我們經(jīng)常會把不同的模塊拆分成不同的組件，而組件之間有的需要傳遞數(shù)據(jù)，所以組件間的數(shù)據(jù)通信就非常重要了2023-04-04
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能
這篇文章主要介紹了vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue之計算屬性的緩存computed的用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
Ant Design Vue全局對話確認框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對話確認框(confirm)的回調(diào)不觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
electron-vue?項目添加啟動loading動畫的實現(xiàn)思路
electron-vue腳手架搭建的項目，在開發(fā)階段可能你注意不到項目啟動慢的問題，但是在build?生成的exe可執(zhí)行文件，啟動后，要反應很久才能進入到app.vue?中加載的頁面，體驗性很差，本文給大家介紹electron?vue啟動動畫效果的實例代碼，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了vue中的input框點擊后不聚焦問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04