给函数传数据

1.通过 data-* 属性传递数据

可以在组件的 data-* 属性中绑定数据,然后在事件处理函数中通过 event.currentTarget.dataset 获取。

<view>
  <button data-id="123" data-name="Tom" bindtap="onButtonClick">点击我</button>
</view>
Page({
  onButtonClick: function(event) {
    // 通过 event.currentTarget.dataset 获取数据
    const id = event.currentTarget.dataset.id; // 123
    const name = event.currentTarget.dataset.name; // "Tom"
    console.log('id:', id, 'name:', name);
  }
});

说明:

  • data-* 是自定义属性,* 可以是任意名称(如 data-iddata-name)。

  • 在事件处理函数中,通过 event.currentTarget.dataset 获取绑定的数据。

2. 直接在事件绑定中传递数据

使用 mark 属性绑定数据,然后在事件处理函数中通过 event.mark 获取。

<view>
  <button mark:id="123" mark:name="Tom" bindtap="onButtonClick">点击我</button>
</view>
Page({
  onButtonClick: function(event) {
    // 通过 event.mark 获取数据
    const id = event.mark.id; // 123
    const name = event.mark.name; // "Tom"
    console.log('id:', id, 'name:', name);
  }
});

说明:

  • mark 是一种更灵活的数据传递方式,适合传递复杂数据。

  • 数据会存储在 event.mark 中。

3.通过页面或组件的 data 传递数据

如果数据是动态的,可以先将数据存储在页面或组件的 data 中,然后在事件处理函数中通过 this.data 获取。

<view>
  <button bindtap="onButtonClick">点击我</button>
</view>
复制代码
Page({
  data: {
    id: 123,
    name: 'Tom'
  },
  onButtonClick: function(event) {
    const id = this.data.id; // 123
    const name = this.data.name; // "Tom"
    console.log('id:', id, 'name:', name);
  }
});
复制代码

通过 dataset 传递动态数据

如果数据是动态的,可以通过 setData 更新 data-* 属性。

<view>
  <button data-id="{{id}}" data-name="{{name}}" bindtap="onButtonClick">点击我</button>
</view>
复制代码
Page({
  data: {
    id: 123,
    name: 'Tom'
  },
  onButtonClick: function(event) {
    const id = event.currentTarget.dataset.id; // 123
    const name = event.currentTarget.dataset.name; // "Tom"
    console.log('id:', id, 'name:', name);
  }
});
复制代码

说明:

  • 通过 setData 动态更新 data-* 属性,适合数据变化的场景。

posted @   洛飞  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示