在vue中如何既能够传入实参，又能够获得事件对象？

最新推荐文章于 2022-10-08 23:02:53 发布
最新推荐文章于 2022-10-08 23:02:53 发布
阅读量243 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50885665/article/details/121287928
版权

一、传入实参

 <div id="d1" @click="say('d1')">d1</div>   ==>   say(dname){ console.log(`${ dname} - 疼！`) }  ==>  d1-疼!

二、获得事件对象

<div id="d1" @click="say">d1</div> ==> say(e){console.log(`x:${ e.offsetX},y:${ e.offsetY} - 疼！`) }  ==>

 

三、既能够传入实参，又能够获得事件对象:

 <div id="d1" @click="say($event, '亮哥')">亮哥</div>  ==>  say(e,dname){  console.log(`${ dname}的x:${ e.offsetX},y:${ e.offsetY}位置 - 疼！`)}  ==>

 

详细介绍:

最低0.47元/天 解锁文章
星空小梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue中，如何既可以传入自定义实参值，又可以获得事件对象
qq_43102118的博客
07-22 504
在vue中，如何既可以传入自定义实参值，又可以获得事件对象。 <元素 @事件名="处理函数(实参值, event,...)">methods:处理函数(形参变量,e,...)...注意：1.event,...)"> methods:{ 处理函数(形参变量, e, ...){ ... } } 注意： 1.event,...)">methods:处理函数(形参变量,e,...)...注意：1.event是vue框架内置的一个关键字，先于事件处理函数获得event对象，包装起来
通过vuex传递参数并触发组件中的事件
前端开发
11-30 9249
组件A为公共组件，负责定时查询信息通知，并通过模态展示； 组件B为业务组件，负责项目中报告的编辑审核等业务流程； 用户打开组件A中的信息通知模态时，可以选择接受或拒绝处理相关通知，接受时直接打开组件B进行业务，拒绝时只刷新通知不进行其他操作。这就需要监听组件A中的事件，当用户打开通知模态点击接受时，获取组件A中所选择用户的id并触发组件B中的方法。
函数的参数对象$event的使用和利用他找到事件对象
weixin_42349568的博客
01-13 1183
一，常用方式：input中获取当前内容 $event.target.value 示例： <body> <div id="app"> <input type="text" @click="abc($event)" value="123" /> </div> <script> var vm = new Vue({ el: "#app", data: {},
vue专栏 03.vue组件 02.组件通信 02.props-实参
Web Python
03-21 71
# 02.props-实参 [toc]{type: "ol", level: [3,4]} ### 组件创建 ```js // 创建子组件 const Box = { props: { brand: {type: String, required:true, default: 'Web'}, colleges: {type: Array, required: false}, }, template: `#box`, }; // 创建父...
Vue中几种常见的传参方式
Salange1的博客
10-08 6403
Vue组件传参方也是面试最常考的内容，犹记得当初刚出来实习的时候，遇到一个需求，大概就是一个tabs下面有五个子页面，每个子页面表示订单的一种状态。当时是把五个子页面抽成了五个组件，做完后又有一个问题，就是在一个页面更改了数据状态之后，切换到另一个页面的时候要通知这个页面更新数据，当时是完全没有思路，找带我的大哥教我，讲了半天还是没有懂，最后还是大哥手把手的教我写完的，那时候觉得大哥好厉害，666，现在一想起来，不就是最简单的兄弟组件之前参数传递吗？😓今天就来回忆一下工作中常用的几种组件传参的方式。
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> (>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) {...
在Vue组件中获取全局的点击事件方法
10-18
在Vue.js开发中，有时我们需要实现全局点击事件的监听，特别是在组件化开发中，以便能够对整个应用的某个特定行为做出响应。例如，一个常见的需求是点击组件外部时关闭某个弹出或者下拉菜单。本篇文章将介绍在Vue...
解决vue 绑定对象内点击事件失效问题
12-12
仔细观察才发现，这段代码内的元素都在 vue 绑定对象中。 因此失效。 解决办法是将绑定对象内的元素点击事件换成 v-on:click。 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望...
vue绑定事件后获取绑定事件中的this方法
12-12
使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type=...以上这篇vue绑定事件后获取绑定事件中的this方法就是小编分享给大家的全部内容了
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中参数传递（合集）
boy火巨的博客
09-10 2万+
前段时间项目用vue搭建整个前端页面，我负责的模块有个地方在页面跳转时得将参数传递到下一个页面，但是由于参数较多，用url带参数传递不是特别好，我尝试了多种方法想在页面之间传递参数都没成功，最后想到了vuex，当时又是刚开始学vue对vuex更是了解不多废了一点时间，好在问题解决了，下面分享我解决问题的代码，希望对大家有所帮助。 一.页面跳转通过路由带参数传递数据 // 1.页面中的代码 t...
Vue的方法的调用以及传参
江夏、的博客
07-30 1万+
前面讲到了如何用CDN的方式引入vue.js。在Vue中方法(methods)和data属于同一量级的属性，所以在Vue中有methods模块，对于方法的定义都定义在这个区域内。如下，在methos内定义一个say的方法，返回，他说要好好学习 同样在html的根容器的标签下，引入say方法，同data中name的调用，因为say是个方法，方法后面应该加(),如下： 用浏览器打开inde...
vue 绑定事件如何传递参数的同时拿到事件对象
u012549055的博客
02-27 2375
<!-- 单单只绑定事件的话，事件对应的方法默认可以拿到事件对象--> <button type="primary" @tap="testTap">测试按钮</button> <!-- evnet 就是事件对象 --> testTap(event){ console.log(event) } <!-- 如果传递参数的话，那么接收 --...
vue @click 绑定的函数，如何同时传入事件对象和自定义参数
little_kid_pea的博客
05-01 5万+
1、仅仅传入自定义参数 html : <div id="app"> <button @click="tm(123)">ddddd</button> </div> js : new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e)...
vue中既能获取事件对象又能获取参数的方法
qq_42452317的博客
09-24 1703
<button @click='a($event,value)'></button> function a (e,val) { console.log(e) //事件对象 console.log(val) //传递的参数 } ...
Vue：带参数函数在传递参数的同时传递事件对象
KaiSarH
01-15 1274
带参数函数在传递参数的同时传递事件对象
vue中的$emit参数浅谈
qq_38363738的博客
09-23 5513
正常使用 vue中的$emit常用与子组件与父组件通信，网上很多博客均已讨论该问题，在此就不多做记录了，直接复制一段过来： 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件：...
vue click同时传入事件对象和自定义参数
热门推荐
马优晨
06-25 8万+
仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } ...
vue同时传入自定义参数和事件对象
Hero_rong的博客
08-29 1933
vue一般传参就是直接在方法里面加参数就好了，例如：@click="zidingyi(123)" 传事件对象的话， 就直接方法名，例如：@click="shijian"，但是不可以@click="shijian()", 如果写了括号，再console.log(e); 结果就是undefined 然后，传事件对象的时候，@click="all($event, 123)" ， 直接再方法里面，$event 就好了 html <view @click="zidingyi(123)...
vue2如何获取事件对象？
最新发布
03-26
在Vue2中，可以通过事件处理函数的参数来获取事件对象。事件处理函数的参数通常被命名为`event`，你可以在函数中使用`event`来访问事件对象的属性和方法。 以下是一个示例代码： ```html 点击我 export ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值