微信小程序怎样给事件传值的

简介: 微信小程序怎样给事件传值的

1.通过自定义属性传值: 在触发事件的组件上,可以通过自定义属性将需要传递的值绑定到事件对象上。在事件处理函数中,通过event.currentTarget.dataset来获取自定义属性的值。


示例代码:

htmlCopy Code<!-- 触发事件的组件 -->
<view data-value="Hello" bindtap="handleTap">点击我</view>
<!-- 事件处理函数 -->
<script>
Page({
  handleTap(event) {
    const value = event.currentTarget.dataset.value;
    console.log(value); // 输出 "Hello"
  }
});
</script>

2.通过事件对象传值: 在触发事件时,可以使用event.detail将值传递给事件处理函数。在触发事件时,可以使用triggerEvent方法触发自定义事件,并通过detail选项传递值。在事件处理函数中,可以通过event.detail获取传递的值。


示例代码:

htmlCopy Code<!-- 触发事件的组件 -->
<button bindtap="handleTap">点击我</button>
<!-- 事件处理函数 -->
<script>
Component({
  methods: {
    handleTap(event) {
      const value = 'Hello';
      this.triggerEvent('customEvent', { detail: value });
    }
  }
});
</script>

3。在另一个组件中监听该事件并获取传递的值:

htmlCopy Code<!-- 监听事件的组件 -->
<component-name bind:customEvent="handleCustomEvent"></component-name>
<!-- 事件处理函数 -->
<script>
Page({
  handleCustomEvent(event) {
    const value = event.detail;
    console.log(value); // 输出 "Hello"
  }
});
</script>


相关文章
|
2月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
73 0
|
11天前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
11 0
|
10天前
|
JavaScript
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
|
2月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底(二十六)
【微信小程序】-- 页面事件 - 上拉触底(二十六)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
|
11天前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
14 1
|
10天前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
37 0
|
11天前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
26 0
|
11天前
|
小程序
【微信小程序-原生开发】实用教程21 - 分包
【微信小程序-原生开发】实用教程21 - 分包
11 0