vue事件处理参数中,既想传 event事件对像,又想传自定义形参的解决

ops/2025/3/19 4:54:50/

当我们在的事件处理函数中,如果绑定是不加参数, 就可以在使用时得到 event 对像,如下图

<view name="aaa" @click="gotochange"></view><script>
const gotochange = (e)=>{console.log(e)//此时的 绑定时是没有传参的, 但在使用是, vue会自动传入 event 对象
}</script>

注意, 上面的情况是 绑定是没有传参的, vue会自动传入 event 对象, 但是, 如果在 绑定时传入了参数

<view name="aaa" @click="gotochange('hahah')"></view>

此时, 我们在绑定是传入了参数, 那么在调用的时候,就不会有 event 对象了


我们的需求是即想有 event 对象, 又想有自定义参数, 怎么做呢
方法: 在绑定函数时 ,第一个参数名称 必需是 $event 名称不能变,就叫$event 然后是后面的形参

<view name="bbb" @click="gotochange($event,'hahaha',''hehehe)"></view>
const gotochange = (e,params1,params2)=>{console.log(e)console.log(params2)
}

以上方法可能会在小程序中有点问题,如我们在使用 uniapp + vue的时候
所以我们下面说一种,所有端都适用的方法传参
也就是我们在 元素的标签上添加 data-abc=“abc” 的属性
这个 abc 就是我们想要传入的自定义参数,代码如下

<view name="haha"  data-abc="myparams" @click="gotochange"></view>
<script setup>
const gotochange = (e) =>{let abc = e.target.dateset("abc")  这样就可以得到自定义的参数了而且, 参数中的 e 就是事件对象
}
<script>

上面的这个方法是一个通用的方法, 小程序 或都 vue 中都是可以通用的


http://www.ppmy.cn/ops/166945.html

相关文章

鸿蒙初级考试备忘

Module类型 Module按照使用场景可以分为两种类型&#xff1a; Ability类型的Module&#xff1a; 用于实现应用的功能和特性。每一个Ability类型的Module编译后&#xff0c;会生成一个以.hap为后缀的文件&#xff0c;我们称其为HAP&#xff08;Harmony Ability Package&#x…

如何保证消息不被重复消费?(如何保证消息消费的幂等性)

面试题 如何保证消息不被重复消费&#xff1f;或者说&#xff0c;如何保证消息消费的幂等性&#xff1f; 面试官心理分析 其实这是很常见的一个问题&#xff0c;这俩问题基本可以连起来问。既然是消费消息&#xff0c;那肯定要考虑会不会重复消费&#xff1f;能不能避免重复…

第二十六篇 让SQL起飞:SQL优化与需求改写实战手册

目录 一、别想太多&#xff01;砍掉多余需求才是王道生活案例&#xff1a;点外卖时&#xff0c;你会先选“附近3公里”再筛选“评分4.5”吗&#xff1f; 二、真假美猴王&#xff01;这些SQL写法你分得清吗&#xff1f;场景1&#xff1a;查未下单用户&#xff08;IN vs EXISTS v…

使用 Redis 实现接口缓存:提升性能的完整指南

1. 为什么需要接口缓存&#xff1f; 接口缓存的主要目的是减少重复计算和数据库查询&#xff0c;从而提升性能。常见场景包括&#xff1a; • 高并发请求&#xff1a;缓存热门数据&#xff0c;避免频繁访问数据库。 • 复杂计算&#xff1a;缓存计算结果&#xff0c;减少 CPU …

【C++11】深入浅出 std::async

【C11】深入浅出 std::async 一、基本用法 c11中增加了线程&#xff0c;使得我们可以非常方便的创建线程&#xff0c;它的基本用法是这样的&#xff1a; void f(int n); std::thread t(f, n 1); t.join();但是线程毕竟是属于比较低层次的东西&#xff0c;有时候使用有些不便…

机器学习在科研领域的应用与未来趋势:机器学习第一性原理+分子动力学

“机器学习”这个词听起来很高大上&#xff0c;但其实概念很简单&#xff1a;让机器像人一样学习。 机器学习的核心是它的自学习能力&#xff0c;能通过训练从数据中发现规律&#xff0c;为各种科学问题提供创新解决方案。 本文较长&#xff0c;建议先收藏后随时查看&#xff0…

Java学习打卡-Day18-ArrayList、Vector、LinkedList

ArrayList 底层是数组队列&#xff0c;相当于动态数组。 ArrayList 中维护了一个Object 类型的数组elementData transient Object[] elementData; ArrayList 中可以存储任何类型的对象&#xff0c;包括 null 值。不过&#xff0c;不建议向ArrayList 中添加 null 值&#xff0c…

「速通AI编程开发」共学(三):提示词(Prompts)配置项

「速通AI编程开发」共学&#xff08;三&#xff09; 一、共学课程来源学习初衷 二、介绍不同模式下的提示词&#xff08;Prompts&#xff09;支持性提示词 三、提示词学习材料分享 一、共学课程来源 Datawhale通过开源学习模式&#xff0c;助力AI学习者与知识连接&#xff0c;…