微信小程序之数据绑定

小程序中,所有的视图上的动态数据都是经过数据绑定而展示在页面上的,所以说,说一千道一万,归根结底还是数据绑定。下面是个人对小程序数据绑定的流程的理解。

111.png

1、首先js请求api获取所需要的业务数据,然后在js对数据进行数据的绑定,从而渲染到视图中(wxml)

2、当我们需要自定属性数据时,就需要在wxml文件中使用事件的方式进行回传自定数据(bindtap绑定事件 ,在组件中使用"data-自定义属性名 =自定义属性值"的方式进行数据的回传),经过绑定事件后,在js中对应的自定义事件中可以获取到对应的自定义属性数据(在事件中使用event.currentTarget.dataset[key]即可获取到我们在wxml文件中回传的自定义属性,key表示自定属性名),然后根据业务需求是否需要再向api请求对应的数据,最后再次进行数据绑定进而进行视图的渲染(wxml)

下面举个例子:

视图wxml.png

示例.png