微信小程序中data-key屬性之?dāng)?shù)據(jù)傳輸(經(jīng)驗(yàn)總結(jié))
本文是總結(jié)的一點(diǎn)經(jīng)驗(yàn)之談
啥是data-key
微信小程序推出 data- 屬性——自定義屬性，為了更好的進(jìn)行數(shù)據(jù)傳遞。
總結(jié)來說，data-key="{{...}}" 是獲取頁面中需要用的數(shù)據(jù)，往js文件（事件）中傳—— 被綁定在其組件上的事件使用 也就是常說的：dataset；（比如：wx:for的view中的每一個項(xiàng)的name屬性值）
而data-key="..." 是從data傳到wxml頁面中，一般都是在data中存在的屬性才這樣做，它就是為了“動態(tài)修改”data中的屬性。
- 只有data-*傳的值才能在事件中被dataset接收，其余的“{{}}”只能使用
- detaildata-*中不帶{{}}時一般都是寫好的值，只是用作：不必用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);
}
})
下面來說幾點(diǎn)問題：
上面的程序，在控制臺輸出：data中的值在event.target.dataset中
我們看到，如愿以償。
那能不能再currentTarget中輸出？
準(zhǔn)確的說，是：能不能獲取currentTarget中的值？
那肯定可以啦！
我們來看官方文檔：
從中可以看出一個很嚴(yán)重的問題：當(dāng)前組件 和 觸發(fā)事件組件
我們都知道，觸發(fā)事件有 bindtap 和 catchtap 兩種。其中，bindtap可向上（父組件）傳遞事件
明白了吧？
一般來說， 要想更精確，就用currentTarget；要在一個大組件中有多個觸發(fā)事件，就可以用target減少事件定義
說說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']);
}
是會出大問題的：它報(bào)undefined！
在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。
也就是說小程序自動轉(zhuǎn)了，會把下劃線轉(zhuǎn)為大寫，大寫轉(zhuǎn)為小寫。。。（不知道坑了多少人）
like(e){
console.log(e.currentTarget.dataset['createdby']);
}
改過之后，世界一片清凈…
總結(jié)
相關(guān)文章
JavaScript中數(shù)組的sort()方法主要用于對數(shù)組的元素進(jìn)行排序。其中，sort()方法有一個可選參數(shù)。接下來通過本文給大家介紹數(shù)組Array.sort()排序的方法，需要的朋友參考下2017-03-03
JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單
我們在淘寶、搜狐等大型網(wǎng)站上都可以看到使用的一些二級下拉菜單，比如下面這張圖片。那么如何實(shí)現(xiàn)導(dǎo)航菜單欄中的二級下拉菜單呢？下面小編給大家分享JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單，感興趣的朋友一起看看吧2016-10-10
Javascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實(shí)例
下面小編就為大家?guī)硪黄狫avascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
下面小編就為大家?guī)硪黄猨avascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
javascript實(shí)現(xiàn)圖像循環(huán)明暗變化的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖像循環(huán)明暗變化的方法,實(shí)例分析了javascript操作css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JsonServer安裝及啟動過程圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
解決typescript項(xiàng)目報(bào)錯:找不到模塊“xxx”或其相應(yīng)的類型聲明問題
這篇文章主要介紹了解決typescript項(xiàng)目報(bào)錯:找不到模塊“xxx”或其相應(yīng)的類型聲明問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實(shí)際代碼，希望能夠以一個比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。2016-10-10
JavaScript對象數(shù)據(jù)結(jié)構(gòu)基本形式:{ key : value},其中key:value就為對象的一個屬性,key作為屬性名稱,value為屬性值,這值可以是任何JavaScript數(shù)據(jù)類型。2009-10-10
手把手教你做超酷的條形碼效果...2007-04-04