vue 实现click同时传入事件对象和自定义参数


Posted in Vue.js onJanuary 29, 2021

仅仅传入自定义参数

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);
  }
 }
})

同时传入事件对象和自定义参数

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.监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操作,这些操作(比如点击)触发后执行的动作(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>

结果:

vue 实现click同时传入事件对象和自定义参数

可以看见每点击一次绑定的值就增加1.也就是说可以吧js的操作放在事件触发的后面。但是有时候逻辑太复杂的时候写在里面就会造成混乱,视图和逻辑混淆。所以click后面可以接一个方法,把所有处理逻辑的方法封装在一个函数里面click的时候调用

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>

效果:

vue 实现click同时传入事件对象和自定义参数

可以看见点击之后执行了greet方法里面js逻辑

3.带参数的时间绑定方法:

同上,唯一区别是携带了参数

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>

效果一致。对方法的调用同样可以一个方法多处多次的调用

4.内联处理器中的方法

也就是说在方法里面调用其他的方法,这里的其他方法可以是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="我调用了"
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

效果:

vue 实现click同时传入事件对象和自定义参数

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>

效果:

vue 实现click同时传入事件对象和自定义参数

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>

效果:

vue 实现click同时传入事件对象和自定义参数

那么就有了阻止默认行为

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

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止 所有的点击 ,而 @click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档,现在大可不必担心。

<!-- the scroll event will not cancel the default scroll behavior -->
<div v-on:scroll.passive="onScroll">...</div>

Vue 为这些修饰符额外提供了 .passive 修饰符来提升移动端的性能。

举个例子,在滚动的时候,浏览器会在整个事件处理完毕之后再触发滚动,因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault()。.passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消。

不要把 .passive 和 .prevent 一起使用。被动处理函数无法阻止默认的事件行为。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。如有错误或未考虑完全的地方,望不吝赐教。

Vue.js 相关文章推荐
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 #Vue.js
vue穿梭框实现上下移动
Jan 29 #Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
You might like
基于mysql的论坛(3)
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
php导出生成word的方法
2015/12/25 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
Javascript this指针
2009/07/30 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
js微信分享API
2020/10/11 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
vue 中自定义指令改变data中的值
2017/06/02 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python去除所有html标签的方法
2015/05/05 Python
Python中turtle作图示例
2017/11/15 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python页面加载的等待方式总结
2021/02/28 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
招聘专员岗位职责
2014/03/07 职场文书
委托书范文
2014/04/02 职场文书
建筑安全标语
2014/06/07 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
五年级数学教学反思
2016/02/16 职场文书
解析Redis Cluster原理
2021/06/21 Redis