微信小程式中data-key屬性之資料傳輸(經驗總結)
本文是總結的一點經驗之談
啥是data-key
微信小程式推出 data- 屬性——自定義屬性,為了更好的進行資料傳遞。
總結來說,data-key="{{...}}"
是獲取頁面中需要用的資料,往js檔案(事件)中傳—— 被繫結在其元件上的事件使用 也就是常說的:dataset;(比如:wx:for的view中的每一個項的name屬性值)
而data-key="..."
是從data傳到wxml頁面中,一般都是在data中存在的屬性才這樣做,它就是為了“動態修改”data中的屬性。
- 只有data-*傳的值才能在事件中被dataset接收,其餘的“{{}}”只能使用
- detaildata-*中不帶{{}}時一般都是寫好的值,只是用作:不必用data中的資料!
怎麼接收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']); }
改過之後,世界一片清淨…
總結