vue 實現(xiàn)click同時傳入事件對象和自定義參數(shù)
更新時間：2021年01月29日 10:10:12 作者：little_kid_pea
這篇文章主要介紹了vue 實現(xiàn)click同時傳入事件對象和自定義參數(shù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
僅僅傳入自定義參數(shù)
HTML
<div id="app"> <button @click="tm(123)">ddddd</button> </div>
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})
僅僅傳入事件對象
HTML
<div id="app"> <button @click="tm">ddddd</button> </div>
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})
同時傳入事件對象和自定義參數(shù)
HTML
<div id="app"> <button @click="tm($event,123)">ddddd</button> </div>
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e,value){
console.log(e);
console.log(value);
}
}
})
補充：vue常用事件之v-on:click 以及事件對象，事件冒泡，事件默認行為
其實v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown.......
以下click為例
注意：所有的v-on都可以簡寫為@，比如說v-click可以簡寫為@click
1.監(jiān)聽事件
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。通常來講就是監(jiān)聽dom觸發(fā)一些操作，這些操作（比如點擊）觸發(fā)后執(zhí)行的動作（js）可有直接寫在后面
v-on:click="item+=1"
eg:
<template>
<div >
<input type="button" value="clickme" v-on:click="item+=1"/>
<div>{{item}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
item:1
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
結(jié)果：
可以看見每點擊一次綁定的值就增加1.也就是說可以吧js的操作放在事件觸發(fā)的后面。但是有時候邏輯太復雜的時候?qū)懺诶锩婢蜁斐苫靵y，視圖和邏輯混淆。所以click后面可以接一個方法，把所有處理邏輯的方法封裝在一個函數(shù)里面click的時候調(diào)用
2.事件處理方法
v-on:click="greet"
eg：
<template>
<div >
<input type="button" value="clickme" v-on:click="greet"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function () {
// `this` 在方法里指向當前 Vue 實例
this.res='Hello ' + this.name + '!';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
可以看見點擊之后執(zhí)行了greet方法里面js邏輯
3.帶參數(shù)的時間綁定方法：
同上，唯一區(qū)別是攜帶了參數(shù)
v-on:click="greet(name)"
<template>
<div >
<input type="button" value="clickme" v-on:click="greet(name)"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept) {
// `this` 在方法里指向當前 Vue 實例
this.res='Hello ' + reccept+1 + '!';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果一致。對方法的調(diào)用同樣可以一個方法多處多次的調(diào)用
4.內(nèi)聯(lián)處理器中的方法
也就是說在方法里面調(diào)用其他的方法,這里的其他方法可以是js原生的方法比如阻止冒泡呀等等，也可以是自定義的方法
v-on:click="greet(name,$event)"
eg:
<template>
<div >
<input type="button" value="clickme" v-on:click="greet(name,$event)"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept,event) {
if (reccept===1) this.say()
},
say:function () {
this.res="我調(diào)用了"
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
5.事件對象
$event 拿到當前點擊事件的事件對象，比如click就是拿到當前點擊的dom事件對象信息
v-on:click="greet($event)"
eg:
<template>
<div >
<input type="button" value="clickme" v-on:click="greet($event)"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
greet: function (ev) {
alert(ev.clientX)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
6.事件冒泡
當不阻止事件冒泡的時候會彈兩次
eg
<template>
<div >
<div @click="show1($event)">
<div @click="show2($event)">點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
那么但阻止冒泡后就只會彈一次
eg:原生js阻止冒泡
ev1.cancelBubble=true
<template>
<div >
<div @click="show1($event)">
<div @click="show2($event)">點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
ev1.cancelBubble=true
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
那么vue自己封裝的阻止冒泡方法呢？
@click.stop="show2()"
eg:
<template>
<div >
<div @click="show1()">
<div @click.stop="show2()">點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function () {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
7.阻止默認行為：
比如：如下右鍵之后會將默認的菜單帶出來
<template>
<div >
<div>
<div @contextmenu="show2()">右鍵點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
那么就有了阻止默認行為
ev1.preventDefault();
eg:
<template>
<div >
<div>
<div @contextmenu="show2($event)">右鍵點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
ev1.preventDefault();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
點擊后默認菜單將不會顯示（PS早360瀏覽器右鍵無效）
vue里面的封裝的阻止默認行為的方法：
@contextmenu.prevent="show2()"
eg:
<template>
<div >
<div>
<div @contextmenu.prevent="show2()">右鍵點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
8.其他事件修飾符
用法都一樣就不再贅述
.capture
.self
.once
<!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監(jiān)聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會阻止 所有的點擊 ，而 @click.self.prevent 只會阻止對元素自身的點擊。
2.1.4 新增
<!-- 點擊事件將只會觸發(fā)一次 --> <a v-on:click.once="doThis"></a>
不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。如果你還沒有閱讀關(guān)于組件的文檔，現(xiàn)在大可不必擔心。
<!-- the scroll event will not cancel the default scroll behavior --> <div v-on:scroll.passive="onScroll">...</div>
Vue 為這些修飾符額外提供了 .passive 修飾符來提升移動端的性能。
舉個例子，在滾動的時候，瀏覽器會在整個事件處理完畢之后再觸發(fā)滾動，因為瀏覽器并不知道這個事件是否在其處理函數(shù)中被調(diào)用了 event.preventDefault()。.passive 修飾符用來進一步告訴瀏覽器這個事件的默認行為不會被取消。
不要把 .passive 和 .prevent 一起使用。被動處理函數(shù)無法阻止默認的事件行為。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。如有錯誤或未考慮完全的地方，望不吝賜教。
相關(guān)文章
vue項目watch內(nèi)的函數(shù)重復觸發(fā)問題的解決
這篇文章主要介紹了vue項目watch內(nèi)的函數(shù)重復觸發(fā)問題的兩種解決方案，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
Element實現(xiàn)動態(tài)增加多個輸入框并校驗
本文主要介紹了Element實現(xiàn)動態(tài)增加多個輸入框并校驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
el-table點擊某一行高亮并顯示小圓點的實現(xiàn)代碼
這篇文章主要介紹了el-table點擊某一行高亮并顯示小圓點，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目預覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項目預覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了在antd4.0中Form使用initialValue操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08
Vue3組件中g(shù)etCurrentInstance()獲取App實例,但是返回null的解決方案
這篇文章主要介紹了Vue3組件中g(shù)etCurrentInstance()獲取App實例,但是返回null的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，Vue.js 是一個提供 MVVM 風格的雙向數(shù)據(jù)綁定的 Javascript 庫，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項，感興趣的朋友一起看看吧2016-11-11