vant-weapp，mpvue,小程序项目中：在函数中除了要拿到事件e,还想再加入参数

环境

• UI：vant-weapp
• 小程序
• mpvue

问题描述

vant-weapp中有个组件ActionSheet 上拉菜单,需要使用其select方法获取用户点击选中得值，这个值在他的event.detail中，我需要获取这个值

UI效果

html

<van-action-sheet :show="sex.show" :actions="sex.actions" :cancel-text="sex.cancel" @cancel='myCancel("sex")' @select="sexSelect" />

注意这里@select="sexSelect"

配置

sex: {
  show: false,
  cancel: '取消',
  current: '',
  actions: [
    {
      name: '男'
    },
    {
      name: '女'
    }
  ]
}

函数

// 性别弹窗里面
sexSelect: function (e) {
  console.log(e)
  this.sex.show = false
  this.sex.current = e.mp.detail.name
},

e.mp.detail.name就能拿到用户下拉选择得值

改进需求

我不只是想获取到用户输入，我还想携带别的参数,这个坑填了好久，才找到得方法,注意这里@select="sexSelect($event,'name')"面得$event,必须有$，否则拿不到，报错

<van-action-sheet :show="sex.show" :actions="sex.actions" :cancel-text="sex.cancel" @cancel='myCancel("sex")' @select="sexSelect($event,'name')" />

js

 // 性别弹窗里面
 sexSelect: function (e, name) {
   console.log(e)
   console.log(name)
   this.sex.show = false
   this.sex.current = e.mp.detail.name
 },

这样我才能拿到用户选择和携带得参数name值

上面携带参数得另外一种实现方式

 
 <van-action-sheet data-index="250" :show="sex.show" :actions="sex.actions" :cancel-text="sex.cancel" @cancel='myCancel("sex")' @select="sexSelect" />

注意：data-index="250",如果绑定得是属性名称，需要加:，例如:data-index="myValue"，index可以改为其他名称