微信小程序通过点击事件传参（data-）

Posted 2022-06-29 水星记_

前言

大家都知道在 vue 中，我们可以直接在点击事件中放入传递的参数进行传参；然而微信小程序中并不适用这样的写法，但是微信小程序可以通过自定义属性从而绑定参数使用。

data- 的用法

微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ，利用 bindtap 点击事件执行函数从而获取到参数信息。

<view bindtap="triggers" data-idType="1">点击我</view>

注意：

data- 是固定的写法，- 后面可以取任意的名字，但是需要强调的是在获取的时候要写相对应的名字，例如：data-index = "1" ，获取时就是 e.target.dataset.index 。

下面通过一个简单的代码小实例带大家更直观的了解 data- 的用法。

wxml文件

<!-- 按钮触发事件 -->
<view bindtap="triggers" data-idType="1">点击我</view>

js文件

Page(
    data: ,
    //点击事件
    triggers(e) 
        console.log(e.target.dataset.idtype); // 1
    ,
)

如下图：