mpvue如何传递原生事件参数和自定义参数

最新推荐文章于 2024-01-29 23:46:05 发布

置顶車句

最新推荐文章于 2024-01-29 23:46:05 发布

阅读量1w

点赞数 2

分类专栏：微信小程序文章标签： mpvue事件小程序事件传参小程序事件参数自定义参数

本文链接：https://blog.csdn.net/weixin_39015132/article/details/81125444

版权

15 篇文章 1 订阅

订阅专栏

写表单，用到一些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;
}

嘘寒问暖不如打笔巨款~

关注