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