首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

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 实现click同时传入事件对象和自定义参数

- Author -

little_kid_pea

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
解决vue页面刷新，数据丢失的问题
Nov 24 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue项目配置sass及引入外部scss文件
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
网页解析(1) 装饰器(1) bs4(1) translation(2) mp3Play(1) 数组(5) 矩阵(1) 读取(1) 数据保存(1) 音频(1)
You might like
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python 异常处理实例详解
2014/03/12 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
美国用餐电影院：Alamo Drafthouse Cinema
2020/01/23 全球购物
Herschel美国官网：背包、手提袋及配件
2020/03/10 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
后备干部考察材料
2014/02/12 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
授权委托书范文
2014/07/31 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
员工考勤管理制度
2015/08/06 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python