mpvue如何传递原生事件参数和自定义参数
原文链接前言写表单,用到一些input组件,需要在表单数据提交前,对数据作简单的校验。虽然最后发现了真正的问题,但还是想记录下这个过程。问题描述只是把电话的验证写在了姓名验证之前,误以为input组件与小程序原生组件同名,以至于无法使用v-model进行数据的双向绑定(其实是可以正常使用的,)。于是,使用小程序原生的bindblur方法,在失去焦点时,手动给变量赋值。开始b...
·
原文链接
前言
写表单,用到一些input组件,需要在表单数据提交前,对数据作简单的校验。虽然最后发现了真正的问题,但还是想记录下这个过程。
问题描述
只是把电话的验证写在了姓名验证之前,误以为input组件与小程序原生组件同名,以至于无法使用v-model进行数据的双向绑定(其实是可以正常使用的,)。于是,使用小程序原生的bindblur方法,在失去焦点时,手动给变量赋值。
开始
bindblur: 输入框失去焦点时触发,event.detail = {value: value};
input组件失去焦点时,可以在事件处理函数中,通过e.detail.value获取到input的值。
在原生小程序中,想要传递参数,需要在组件上设置属性data-key="value",用方式传递参数挺不习惯的。
解决方法
在组件上绑定事件处理函数,通过第一个参数$event传递事件参数,之后的参数可以传递自定义的参数。
<input type="text" placeholder="昵称" @blur="setValue($event, 'name')">
在事件处理函数中,就可以通过事件参数获取到对应的值,以及开发者自定义的参数。
setValue(e, key){
console.log(e)
console.log(key)
console.log(this[key])
this[key] = e.mp.detail.value;
}
嘘寒问暖 不如打笔巨款~
更多推荐
已为社区贡献9条内容
所有评论(0)