本文是總結(jié)的一點(diǎn)經(jīng)驗(yàn)之談

啥是data-key

微信小程序推出 data- 屬性——自定義屬性，為了更好的進(jìn)行數(shù)據(jù)傳遞。
總結(jié)來(lái)說(shuō)，data-key="{{...}}" 是獲取頁(yè)面中需要用的數(shù)據(jù)，往js文件（事件）中傳—— 被綁定在其組件上的事件使用 也就是常說(shuō)的：dataset；（比如：wx:for的view中的每一個(gè)項(xiàng)的name屬性值）
而data-key="..." 是從data傳到wxml頁(yè)面中，一般都是在data中存在的屬性才這樣做，它就是為了“動(dòng)態(tài)修改”data中的屬性。

• 只有data-*傳的值才能在事件中被dataset接收，其余的“{{}}”只能使用
• detaildata-*中不帶{{}}時(shí)一般都是寫好的值，只是用作：不必用data中的數(shù)據(jù)！

怎么接收data-*的值

如下：

<view bindtap="SetData" data-name="mxc" data-age="18">
 獲取數(shù)據(jù)
</view>

js中：

Page({
 data:{
 name:'',
 age:0
 },
 SetData:function(e){
 console.log(e);
 this.setData({
  name:e.target.dataset.name
 });
 console.log(this.data.name);
 }
})

下面來(lái)說(shuō)幾點(diǎn)問(wèn)題：

上面的程序，在控制臺(tái)輸出：data中的值在event.target.dataset中

我們看到，如愿以償。

那能不能再currentTarget中輸出？

準(zhǔn)確的說(shuō)，是：能不能獲取currentTarget中的值？
那肯定可以啦！

我們來(lái)看官方文檔：

從中可以看出一個(gè)很嚴(yán)重的問(wèn)題：當(dāng)前組件 和 觸發(fā)事件組件
我們都知道，觸發(fā)事件有 bindtap 和 catchtap 兩種。其中，bindtap可向上（父組件）傳遞事件
明白了吧？
一般來(lái)說(shuō)， 要想更精確，就用currentTarget；要在一個(gè)大組件中有多個(gè)觸發(fā)事件，就可以用target減少事件定義

說(shuō)說(shuō)data-綁定數(shù)據(jù)的坑

你如果在wxml中這么寫

<view bindtap='like' data-id='{{laugh.id}}' data-createdBy='{{laugh.created_by}}'>

然后在js中接收：

like(e){
 console.log(e.currentTarget.dataset['createdBy']);
 }

是會(huì)出大問(wèn)題的：它報(bào)undefined！

在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會(huì)通過(guò)事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。

也就是說(shuō)小程序自動(dòng)轉(zhuǎn)了，會(huì)把下劃線轉(zhuǎn)為大寫，大寫轉(zhuǎn)為小寫。。。（不知道坑了多少人）

like(e){
 console.log(e.currentTarget.dataset['createdby']);
 }

改過(guò)之后，世界一片清凈…

總結(jié)

最新評(píng)論