微信小程序 data-id 使用

自定义数据

在组件节点中可以附加一些自定义数据。在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

• data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
• data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

data-id 是自定义数据属性的一部分，这些数据可以在事件处理器中通过 event.currentTarget.dataset 获取。data-id 不是唯一的，可以为多个元素使用相同的值。

自定义数据使用

我自定义了一个日历时间的选择组件，该组件的功能为：使用传入的数据进行组件初始化，然后将用户选择的时间段返回。在一个页面中多个地方用到该组件，但我不想在每个使用到的地方都定义该组件。我在该页面中定义一次该组件，在每个触发该组件的按钮上都设置上自定义数据 data-id，每次点击按钮触发该组件时，先根据 data-id 的值处理相应的业务逻辑，然后再将该值传递给自定义组件，并成为该组件的 data-id，当用户完成时间段的选择后，获取用户选择的时间段和 data-id 的值，根据 data-id 更新相应的业务数据。

在页面中使用的伪代码：

index.wxml：

<view>
  <!-- 按钮 1，触发组件 -->
  <button data-id="button1" bindtap="openCalendar">选择按钮 1 时间</button>

  <!-- 按钮 2，触发组件 -->
  <button data-id="button2" bindtap="openCalendar">选择按钮 2 时间</button>

  <!-- 定义一次日历选择组件 -->
  <calendar-time
    wx:if="{{showCalendar}}"
    data-id="{{currentDataId}}"
    bind:timeSelected="onTimeSelected"
  />
</view>

index.js：

Page({
  data: {
    showCalendar: false, // 用以控制是否显示组件
    currentDataId: ''    // 存储当前 data-id
    ......

  },

  // 打开日历选择组件
  openCalendar(e) {

    // 获取点击按钮的 data-id
    const dataId = e.currentTarget.dataset.id; 

    // 根据 data-id 处理相应的业务逻辑，如初始化日期等
    ......

    // 显示日历组件，并传递 data-id 和其它数据 
    this.setData({
      showCalendar: true,
      currentDataId: dataId
    });
  },

  // 处理时间选择后的回调
  onTimeSelected(e) {

    // calendar-time 组件上的 data-id
    const targetId = e.currentTarget.dataset.id; 

    // 获取新选择的时间段
    ......

    // 根据 data-id 和用户选择的时间段进行业务逻辑处理
    ......

    // 隐藏日历选择器和更新相应业务数据
    this.setData({
      showCalendar: false,
      ......
    });
  }
});

参考

微信小程序 dataset