【vue脱坑指南】 @click 参数传当前对象

最新推荐文章于 2025-05-06 08:25:04 发布
原创 最新推荐文章于 2025-05-06 08:25:04 发布 · 1.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文阐述了在Vue中正确传递参数给事件处理函数的方法，避免使用'this'导致无法获取当前对象的问题，推荐使用'$event'来确保能通过'event.currentTarget'获取正确的点击事件对象。

错误示例：

传 this 不能获取到当前对象。

<img :src.prop="verifycode" @click="flushVerifycode(this)"  />

 

 正确做法：

传 $event 事件。

<img :src.prop="verifycode" @click="flushVerifycode($event)" />

此时 event.currentTarget 便可以获取到当前点击事件对象。

 

harryperlau
关注
vue3迁移指南
weixin_68658847的博客
04-04 1344
vue3迁移指南
Vue：vue-router使用指南
ChinaDragon10的博客
08-03 1405
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举
关于vue的@click传递
qq_40088443的博客
03-22 3779
新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了，但是在vue里，this被赋予了特殊的含义，这样做并不可以。所以当碰上需要传递点击的这个元素时，可以用事件传递。在@click后面加上事件event。示例如下： <div @click="test($event)"> </div> 然后Vue部分： methods:{ t...
vue @click 绑定的函数，如何同时传入事件对象 e 和自定义参数
weixin_55846296的博客
12-27 3257
vue @click 绑定的函数，如何同时传入事件对象和自定义参数
Vue元素点击时获取当前对象
asing1elife's blog
09-22 3209
vue中在元素点击时获取当前对象需要手动传入当前对象 更多精彩 更多技术博客，请移步 asing1elife’s blog 在点击时传入当前对象 $event 表示当前被点击的对象 &lt;el-menu-item v-for="submenu in menu.submenus" @click="clickSubmenu(submenu.operations, $event)"&gt;...
vue @click传参时this问题
weixin_43900888的博客
05-07 6263
vue中，当button的@click函数传递data中数据作为函数参数时，不可使用this.xxx，因为此时this指向button自身，而不是数据。 例如，下列为错误示范： <el-button type="primary" round @click="exchange(this.tableDatae)">兑换</el-button> export default{ data(){ return { tableData:'k' } } } 正确示范： &l
vue@click传入和使用当前对象
ss_Tina的博客
09-06 1934
vue 传入和使用当前对象
Vue 面试指南附源代码
07-12
### Vue.js面试指南知识点解析 #### 一、技术要点概览 **1. Vue.js基础** - **Vue实例**: `new Vue({})` 创建一个新的Vue实例。实例对象提供多个内部属性和方法，用来处理数据监听、编译模板、渲染DOM等。 - **...
vue3快速上手指南
weixin_43943583的博客
07-15 2531
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台_，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。<template>
Vue3实战指南
最新发布
monk all the way
05-06 1067
Vue 3 是当前流行的前端框架之一，具有更好的性能、更小的体积和更优秀的组合式API。下面我将介绍Vue 3的核心概念和实战技巧。
js中使用在标签中添加onclick时间传当前对象
weixin_41929877的博客
05-23 3460
html；&lt;div onclick="test(this)"&gt;测试&lt;/div&gt;js:function test(obj){       $(obj).val("123");//此处的obj就是传来的div对象。}
vue：click函数传当前数组的参数和获取当前dom
m0_37922443的博客
08-24 3622
传值：获取当前的数组的index位的数据 <tr v-for="(item,index) in message_List"> <td @click="reply(message_List[index].phone_num)">{{item.phone_num}}</td> </tr> reply: function (e) { console.log("number:" + e); }, .
[Vue]点击事件获取元素本身及事件
iChangebaobao的博客
08-08 6629
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } } ...
Vue路由传参的方法和传递参数为对象时的问题
djwhwj的博客
09-28 6660
Vue路由传参，页面刷新后参数丢失原因与解决方法
vue3的自定义事件传参
mfxcyh的博客
06-12 5916
在vue3中使用自定义事件传输数据
vue中传值的方法
czw2ly的博客
12-05 3413
主要是谈谈vue中组件传值的方法，供大家参考
vue3组件传值方式汇总
qq_56489674的博客
11-29 2282
点我触发自定义事件
vue 的点击事件怎么获取当前点击的元素
热门推荐
webFront的博客
05-14 4万+
首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如&lt;button @click = “clickfun($event)”&gt;点击&lt;/button&gt;methods: { clickfun(e) { // e.target 是你当前点击的元素 // e....
vue click点击事件传入事件对象、自定义参数
前端
12-21 7918
不传参数，不接收参数 <div id="app"> <button v-on:click="fun">Say hi</button> </div> <script> new Vue({ el: '#app', methods: { fun: function () { console.log(event) }
@click如何传参
04-29
好的，我现在需要帮助用户解决在Vue.js中通过@click事件传递参数的问题。用户提到了他们之前的问题和回答，我需要参考站内已有的引用内容来提供解决方案。 首先，用户提供的引用中有关于兄弟组件传参的内容，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值