微信小程序中data-key屬性：數據傳輸

本文是總結的一點經驗之談

啥是data-key

微信小程序推出 data- 屬性——自定義屬性，爲了更好的進行數據傳遞。
總結來說，data-key="{{...}}" 是往data中傳數據（有後端的話是要給後端的），而data-key="..." 是從data（有後端的話是從後端先傳給data接收）傳到wxml頁面中

怎麼接收data-*的值

如下：

<view bindtap="SetData" data-name="mxc" data-age="18">
  獲取數據
</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);
  }
})

下面來說幾點問題：
上面的程序，在控制檯輸出：data中的值在event.target.dataset中

我們看到，如願以償。

那能不能再currentTarget中輸出？

準確的說，是：能不能獲取currentTarget中的值？
那肯定可以啦！

我們來看官方文檔：

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

說說data-綁定數據的坑

你如果在wxml中這麼寫：

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

然後在js中接收：

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

是會出大問題的：它報undefined！

在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉成駝峯elementType。

也就是說小程序自動轉了，會把下劃線轉爲大寫，大寫轉爲小寫。。。（不知道坑了多少人）

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

改過之後，世界一片清淨…