【微信小程序】事件传参问题

前言：微信小程序跟vue.js有很多相似点，也有很多不同点。例如在事件传值上就有很大区别。

 

一、问题还原

<!-- test.wxml -->
<view class="content">
    <button wx:for="{{buttonList}}"
            wx:key="{{item}}"
            bindtap="getIndex(index)">
      {{item}}
    </button>
</view>

//test.js
Page({
  data:{
    buttonList: ['btn1', 'btn2', 'btn3', 'btn4',]
  },
  getIndex: function(index){
    console.log(index)
  }
});

运行结果：

 在vue.js中，我们可以直接通过上面代码一样，在事件函数中传参。而在小程序中，并不能这样传参，而且控制台还会发出警告。

 

二、解决方案

<!-- test.wxml -->
<view class="content">
    <button wx:for="{{buttonList}}"
            wx:key="{{item}}"
            data-index="{{index}}"
            bindtap="getIndex">
      {{item}}
    </button>
</view>

//test.js
Page({
  data:{
    buttonList: ['btn1', 'btn2', 'btn3', 'btn4',]
  },
  getIndex: function(event){
    console.log(event);
    console.log(event.currentTarget.dataset.index);
  }
});

运行结果：点击btn1

像这样，通过event事件对象，可以访问 event.currentTarget.dataset对象，而里面的键名就是我们在标签上添加的"data-"属性，值就是我们添加的值了。