组件库的事件中如何自定义参数

最新推荐文章于 2023-11-17 15:40:28 发布
最新推荐文章于 2023-11-17 15:40:28 发布
阅读量1k 收藏 2
点赞数 7
分类专栏： 开发 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achao_2020/article/details/107092545
版权

在vue中使用组件库时,组件内部抛出的事件,会携带着参数,这时又需要传入自己的参数,怎么办呢?
有两种解决方法:
1.箭头函数
下方代码为vant的时间日期选择器 confirm事件绑定了一个箭头函数,接收组件内部传出来的值,然后在箭头函数中调用自己的方法,传递默认值和自定义的值
在这里插入图片描述2.使用arguments + '…'对象展开运算符
具体为 @confirm=“onConfirm(…arguments,/这里的参数列表可以自定义/)”

achao_2020
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
H5微应用 Vue3+Vant4表单中使用下拉单选、多选控件
weixin_44108109的博客
08-08 6097
最近在做钉钉端H5微应用的开发，项目前端架构是Vue3+Vant4，表单中需要使用字典下拉单选、多选控件，但Vant4中没有直接可以使用的控件，因此整合、、、、等组件，封装了带有弹出层的下拉单选、多选控件。在新增、编辑、详情页面均可使用，快速提高团队开发效率。
一个用vant时提取位置选择的confirm代码
weixin_44190736的博客
03-03 716
使用vant的示例代码时，可以通过这个confirm函数将province、city、town提取出来 //选定所在位置后将省、市、区分别写入form locationCode(value) { let test = '' let temp='' value.forEach((element) => { //如果是直辖市，则市名会等于上一个省名，此时不把市名加入test内，则选择北京市+朝阳区的情况时，不会出现“北京市北京市朝阳区”的字样
vant组件中 dialog的确认按钮的回调事件操作
01-22
不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说的 然后我就绑定了事件 ：confirm 结果他的触发机制是：加载页面时会触发，点击按钮打开模态框时会触发，点击确定会触发，点击取消也会触发。 经过查阅资料以后，可以绑定他一个事件：beforeClose 这个事件的回调 有两个参数， 第一个参数是来判断点击的是确认按钮还是取消按钮。第二个参数我感觉就是可以关闭模态框。 补充知识：修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属性 confirm-button-text 与 cancel-button-text 。 co
vant picker confirm事件
11-26 7951
背景： 页面中表单中有多项点击弹出的picker且picker columns值不同，点击picker确定按钮给相对应的变量赋值。 问题： 点击确认按钮时设置对应v-model变量变量值 解决方法： 根据 refs 来获取组件的title值给变量赋值 相应代码： <template> <div class="apply_dialog"> <van-form> <van-field readonly .
vue2项目Vant组件Dialog 弹出框异步关闭的坑
前端开发小白9527
06-28 2900
vue2项目Vant组件Dialog 弹出框异步关闭的坑
vue - vue中对Vant日历组件（calendar）的二次封装
qq_43886365的博客
02-20 2702
vue中对Vant日历组件（calendar）的二次封装
Vue 组件复用多次自定义参数操作
10-15
通过合理地利用props传递数据，以及插槽插入自定义内容，我们可以构建出高度可复用的组件库。同时，通过函数式参数传递，我们可以灵活处理组件实例间的差异化需求，使代码更加简洁和易于维护。对于初学者来说，理解...
flex自定义组件事件DEMO
11-18
在Flex编程中，自定义组件是提升应用可扩展性和复用性的重要...通过这个DEMO，开发者可以学习到如何有效地扩展Flex组件库，构建具有交互性和复杂性的用户界面。记得动手实践，不断探索和优化，才能真正掌握这一技能。
vue中使用element组件时事件想要传递其他参数的问题
10-16
在Vue.js中使用Element UI组件库时，经常会遇到需要在事件处理函数中传递额外参数的情况。Element UI提供了丰富的组件，如上传组件`el-upload`，在处理这些组件的事件时，我们可能需要在原有参数基础上添加自定义...
jQuery自定义事件的简单实现代码
12-08
在自定义事件的情况下，我们可以将自定义的事件名称作为参数传递给`bind()`，然后提供一个回调函数来处理这个事件。例如： ```javascript $("#btn").bind("myClick", function() { $("#test").append("自定义事件...
alimini-components:支付宝小程序自定义组件库
05-11
在支付宝小程序的开发过程中，为了提高开发效率和代码复用性，自定义组件库起着至关重要的作用。本文将深入探讨支付宝小程序自定义组件库——alimini-components。 alimini-components是专为支付宝小程序设计的一套...
自定义confirm
wh_xmy的博客
03-03 2741
如果感觉原生的confirm满足不了你的要求，你可以尝试着自己去处理，下面是我自定义的confirm方法。代码如下： function Confirm() { var options = { "title": "提示信息", "confirm": "确定", "cancel": "取消" }; var selfDefault
微信小程序使用vant组件的输入框搭配弹层选择器注意事项
1
07-29 3453
来禁用输入框,样式会变成禁用状态下的样式很难改动,只需要设置为只读即可,也不会触发手机键盘.这个只读属性,不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验.也不要用。在做这个效果的时候,输入框。...
Vant Dialog.confirm函数形式确认框点击遮罩层关闭弹窗
撑起自己半边天
09-06 1941
Vant Dialog.confirm函数形式确认框点击遮罩层关闭弹窗
vue3＋vant4实现国际化语言切换以及解决Not available in legacy mode 报错问题
killerdoubie的博客
02-21 2181
vue3＋vant4实现国际化语言切换以及解决Not available in legacy mode 报错问题
vant组件有回调参数的方法中加入自定义参数
Serena_tz的博客
04-29 3081
最近在用vant框架做移动端应用，在做级联选择的时候，添加的内容根据【索引】填充不到指定的位置。 在做一个功能的时候要在有回调参数的方法中加入自定义的参数。实现 在传参的末尾,添加$event参数即可 ...
vant picker选择器自定义选项内容
sunddy_x的博客
03-16 9687
前言 项目中遇到需要在选择器中展示多行数据，这里需要用到picker的自定义选项内容。 代码 <template> <div class="app-container"> <van-nav-bar :title="navTitle" /> <section> <van-form @submit="onSubmit"> <van-field readonly
vue 第三方组件 方法 传递多个参数，保留默认参数，并传递自定义参数 记录
最新发布
qq_64658953的博客
11-17 692
/ 默认参数 console.log(customParam);在上面的代码中，@change事件中使用了$event来传递默认参数，同时使用展开运算符(…在handleChange方法中，第一个参数event是默认参数，第二个参数customParam是自定义参数。同时，为了保留默认参数，可以使用$event来传递默认参数。<van-radio v-model="radio" @change="handleChange($event, '自定义参数')">备选项</van-radio>
vue父组件在接收子组件方法传递参数的时，如何添加自定义参数
kirinlau的专栏
01-15 3994
在vue中，父组件中使用子组件方法的和传递过来的参数时直接只用参数就可以了，如下： // child this.$emit('change', param) // parent @change='parentHandle(param)' 如果我们在使用子组件方法的同时，还想使用自定义参数呢，使用场景比如，在父组件中遍历子组件，想使用每个组件的索引， 这时候就需要修改一下写法： // child this.$emit('change', param) // parent @change='parentHan

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值