【小程序】数据和事件绑定和数据同步传参

女爷i 2024-03-30 11:29 13阅读 0赞

**目录**

数据绑定

1. 数据绑定的基本原则

2. 在 data 中定义页面的数据

3. Mustache 语法的格式

4. Mustache 语法的应用场景

5. 动态绑定内容

6. 动态绑定属性

7. 三元运算

8. 算数运算

事件绑定

1. 什么是事件

2. 小程序中常用的事件

3. 事件对象的属性列表

4. target 和 currentTarget 的区别

5. bindtap 的语法格式

6. 在事件处理函数中为 data 中的数据赋值

7. 事件传参

8. bindinput 的语法格式

9. 实现文本框和 data 之间的数据同步

## 数据绑定 ##

### 1. 数据绑定的基本原则 ###

在 data 中定义数据

在 WXML 中使用数据

### 2. 在 data 中定义页面的数据 ###

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

![61cad2768c3b403b99cc5c3fd690b493.png][]

### 3. Mustache 语法的格式 ###

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格

式为：

![cfea8121f6bb4fb38a53d34bead2173f.png][]

### 4. Mustache 语法的应用场景 ###

Mustache 语法的主要应用场景如下：

绑定内容

绑定属性

运算（三元运算、算术运算等）

### 5. 动态绑定内容 ###

页面的数据如下：

![aaa4a666a0d14afd8c22813fdcc68e56.png][]

页面的结构如下：

![8b55c3171de844f48a6df98e0a43a92b.png][]

### 6. 动态绑定属性 ###

页面的数据如下：

![1fbb341617de4b17b00c7fb586210084.png][]

页面的结构如下：

![714d0a33c688480386af123e8aeafbd9.png][]

### 7. 三元运算 ###

页面的数据如下：

![fd00c8d8cf984be3957457e69227198c.png][]

页面的结构如下：

![c1933e227ddf4e74b21e110ef5eb476d.png][]

### 8. 算数运算 ###

页面的数据如下：

![ebdf210836e74405a7192c9a965e3186.png][]

页面的结构如下：

![f87db1166a2148e2ba6752d8e2d47afc.png][]

## 事件绑定 ##

### 1. 什么是事件 ###

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行

业务的处理。 ![d25419c3de2f4f2692bd94db090bcba5.png][]

### 2. 小程序中常用的事件 ###

![b6b7424e791e48b390e6490420e7f23d.png][]

### 3. 事件对象的属性列表 ###

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：

![3bebb174c2b64972ad0094d2c002ed9d.png][]

### 4. target 和 currentTarget 的区别 ###

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下：

![4cd24531913c4b3e9acfef7a1dbe3957.png][]

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

此时，对于外层的 view 来说：

e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件

e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组

件

### 5. bindtap 的语法格式 ###

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行

为。 通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：![ef8a281f0bc74531b06f342bf4f2ca28.png][]

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接

收：

![54e7e4f22b15421ea40292e59b7b7b2d.png][]

### 6. 在事件处理函数中为 data 中的数据赋值 ###

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：

### ![ff618bf7487c45589723ba3b4fe03cac.png][]7. 事件传参 ###

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代

码将不能正常工作： ![f185bee3507141f1a2f28b7c34576aa8.png][]

因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为

btnHandler(123) 的事件处理函数。

可以为组件提供 data-\* 自定义属性传参，其中 \* 代表的是参数的名字，示例代码如下：![76ddb1f6cbe94dcaacda823d42dc0207.png][]

最终： info 会被解析为参数的名字 数值 2 会被解析为参数的值

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：![9145aa7d265d4be4973b2773efb8e8b2.png][]

### 8. bindinput 的语法格式 ###

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下： 通过 bindinput，可以为

文本框绑定输入事件：![28f7436daace42688c7a7946c259d822.png][]

在页面的 .js 文件中定义事件处理函数：

![b5e56967fbc24670a6459abca51ebf3c.png][]

### 9. 实现文本框和 data 之间的数据同步 ###

实现步骤：

定义数据

渲染结构

美化样式

绑定 input 事件处理函数

定义数据：![b0af1019ba49483aafc8bdd133b7cb3d.png][]

渲染结构：

![ec1162aaefe141bfa83cb3918ef28431.png][]

美化样式：

![61d697b5a51441e29fa0c272fd68ddba.png][]

绑定 input 事件处理函数：

![825ea4474009428a9ed9337f232ce9e9.png][]

[61cad2768c3b403b99cc5c3fd690b493.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a0a7cddcb5b345138b08c3f91f3fab26.png
[cfea8121f6bb4fb38a53d34bead2173f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5e1af7ea7f2244c6a099310e633a4b8b.png
[aaa4a666a0d14afd8c22813fdcc68e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ec62983f00df4af0a8f1295cc27f6356.png
[8b55c3171de844f48a6df98e0a43a92b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0a0a3b2e9ded471db5093dde6a7467c7.png
[1fbb341617de4b17b00c7fb586210084.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4ce14bc1bf384de5a19ea78330c01c76.png
[714d0a33c688480386af123e8aeafbd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/64a06899554b41fea8b8f67c64b4ddca.png
[fd00c8d8cf984be3957457e69227198c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a724fdccecc8428dbecc98e9b72f7cc1.png
[c1933e227ddf4e74b21e110ef5eb476d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0b5986b9c7344198b72e7618c9e96354.png
[ebdf210836e74405a7192c9a965e3186.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/27763bf867be42d4ab162707371d54f6.png
[f87db1166a2148e2ba6752d8e2d47afc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8f4ac2a0424c4f78ad80e9273ed259dc.png
[d25419c3de2f4f2692bd94db090bcba5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c441c5c73e19428781309708793fb13d.png
[b6b7424e791e48b390e6490420e7f23d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0db418603d1640f48045c8c50e4afdd1.png
[3bebb174c2b64972ad0094d2c002ed9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fc8aefdeeec249eca9bc1757c76336ac.png
[4cd24531913c4b3e9acfef7a1dbe3957.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/17be713adc004491af47127ee0f5d078.png
[ef8a281f0bc74531b06f342bf4f2ca28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/640edcf48f1344a29a0c0513eb556c8d.png
[54e7e4f22b15421ea40292e59b7b7b2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/12eb273183b6419d903a07f630ed97e0.png
[ff618bf7487c45589723ba3b4fe03cac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bb824004bfe6410b895c72f79c893551.png
[f185bee3507141f1a2f28b7c34576aa8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cc9d672a567c4d5b85c7ea7f77eb2d5f.png
[76ddb1f6cbe94dcaacda823d42dc0207.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9bd0f5b6fef44eae91fe6ceae0c39255.png
[9145aa7d265d4be4973b2773efb8e8b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c38910da44f448568276a222b86ccd8b.png
[28f7436daace42688c7a7946c259d822.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a3fd9ba29d974f1f8c2704c3470532a1.png
[b5e56967fbc24670a6459abca51ebf3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/47a9bddd03c94e3d8bba4edacd1ab4db.png
[b0af1019ba49483aafc8bdd133b7cb3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/905ce8d3fb4c43878dfef78976df0f64.png
[ec1162aaefe141bfa83cb3918ef28431.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/81b0d802c67844ad827932ade9c75c20.png
[61d697b5a51441e29fa0c272fd68ddba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/120397e741424a8db92eb97064728ac5.png
[825ea4474009428a9ed9337f232ce9e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/35061c3ff7cc4674ab8e1e353bc82b7a.png