P21_事件传参与数据同步

事件绑定

1. 在事件处理函数中为 data 中的数据赋值
   • 通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
     
     
2. 事件传参
   • 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：
     
     
     
     因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数。
   • 可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：
     
     
     
     最终：
     • info 会被解析为参数的名字
     • 数值 2 会被解析为参数的值
   • 在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：
     
     
3. bindinput 的语法格式
   
   在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：
   • 通过 bindinput，可以为文本框绑定输入事件：
     
     
     
     在页面的 .js 文件中定义事件处理函数：
     
     
4. 实现文本框和 data 之间的数据同步
   • 实现步骤：
     • 定义数据
     • 渲染结构
     • 美化样式
     • 绑定 input 事件处理函数
   • 定义数据：
     
     
   • 渲染结构：
     
     
   • 美化样式
     
     
   • 绑定 input 事件处理函数：
     
     

代码示例：

index.wxml

<!--pages/demo/index.wxml-->
  <view>数值：{{count}}</view>
  <button type="primary" bindtap="btnHandler" data-info="{{2}}">按钮加加</button>
  <input bindinput="inputHandler"></input>
  <view>消息：{{msg}}</view>
  <input value="{{msg}}" bindinput="iptHandler"></input>

index.js

// pages/demo/index.js
Page({

/**




页面的初始数据

*/

data: {

count: 0,

msg: "你好，"

},

btnHandler(e){

this.setData({

count: this.data.count + e.target.dataset.info

})

},

iptHandler(e){

this.setData({

msg: e.detail.value

})

},

inputHandler(e){

console.log(e.detail.value)

}

})