在原生小程序開(kāi)發(fā)中，數(shù)據(jù)流是單向的，無(wú)法雙向綁定，但是要實(shí)現(xiàn)雙向綁定的功能還是蠻簡(jiǎn)單的！下文要講的是小程序框架 minapp 中實(shí)現(xiàn)雙向綁定的原理，在 minapp 中，你只需要在 wxml 模板中給組件的屬性名后加上 .sync 就可以實(shí)現(xiàn)雙向綁定。
下面為了解釋其原理，過(guò)程可能會(huì)說(shuō)的稍微復(fù)雜些，但其實(shí) minapp 框架已經(jīng)處理了那些繁雜的細(xì)節(jié)！首先，要使數(shù)據(jù)雙向綁定，應(yīng)該避免過(guò)多的數(shù)據(jù)源。
在數(shù)據(jù)從上到下自然流動(dòng)的情況下，如果每個(gè)組件中都維護(hù)它們自己的數(shù)據(jù)，而又要保持它們數(shù)據(jù)值的一致，這雖然可以做到，但實(shí)現(xiàn)過(guò)程并不會(huì)簡(jiǎn)單。
但是也沒(méi)必要說(shuō)為了有一個(gè)統(tǒng)一的數(shù)據(jù)源就使用 mobx 或 redux 來(lái)全局管理數(shù)據(jù)，這就有點(diǎn)殺雞用牛刀的感覺(jué)了。
由于雙向綁定只存在于父子組件之間，而數(shù)據(jù)又是從父到子傳遞的，所以可以優(yōu)先使用父組件中的數(shù)據(jù)為數(shù)據(jù)源，子組件每次更新數(shù)據(jù)并不更新它自己內(nèi)部的數(shù)據(jù)，而是通過(guò)事件機(jī)制觸發(fā)父組件更新它的數(shù)據(jù)，而父組件更新數(shù)據(jù)后又會(huì)將更新的數(shù)據(jù)自然地傳給子組件，由此達(dá)到數(shù)據(jù)的雙向流動(dòng)！并不是所有數(shù)據(jù)都需要雙向綁定，也并不是所有數(shù)據(jù)都是對(duì)外的，子組件還可以有它自己的一個(gè)內(nèi)部數(shù)據(jù)。
所以這就涉及到我們要說(shuō)的第二個(gè)問(wèn)題：
區(qū)分哪些數(shù)據(jù)需要雙向綁定，哪些數(shù)據(jù)又需要子組件自己維護(hù)。
用過(guò) vue 的應(yīng)該都知道，在 vue 中要實(shí)現(xiàn)雙向綁定，需要在模板中做特殊處理。
比如要將父組件的 parentAttr 雙向綁定到子組件的 childAttr 上，需要在父組件的模板中這樣寫(xiě)：
但是小程序并沒(méi)有這樣的簡(jiǎn)單的語(yǔ)法，小程序的 wxml 語(yǔ)言的屬性名中甚至都不允許出現(xiàn) " . " 這樣的字符。
回到我們的問(wèn)題上來(lái)，子組件需要知道哪些屬性需要雙向綁定，哪些屬性需要自己維護(hù)，給模板加個(gè)字段（syncAttrMap）專(zhuān)門(mén)來(lái)告訴子組件需要雙向綁定的數(shù)據(jù)集合不就行了么。
如，可以將上面的示例寫(xiě)成微信小程序支持的寫(xiě)法：
接著，就需要處理子組件數(shù)據(jù)更新的問(wèn)題了，在子組件中有兩部分?jǐn)?shù)據(jù)，一部分是內(nèi)部數(shù)據(jù)，另一部分是父組件中的數(shù)據(jù)，子組件可以通過(guò)讀取屬性 syncAttrMap 來(lái)得到哪些數(shù)據(jù)是內(nèi)部的數(shù)據(jù)，哪些數(shù)據(jù)是父組件的數(shù)據(jù)，并且可以知道對(duì)應(yīng)的父組件中的數(shù)據(jù)的鍵名是什么。
由于原生的組件方法 setData 不會(huì)管你是內(nèi)部數(shù)據(jù)，還是父組件中的數(shù)據(jù)，只要你調(diào)用它去更新數(shù)據(jù)，它只會(huì)更新內(nèi)部的數(shù)據(jù)。
所以需要另外實(shí)現(xiàn)一個(gè)新的方法，來(lái)自動(dòng)判斷數(shù)據(jù)源，如果是內(nèi)部數(shù)據(jù)，則直接調(diào)用 setData ；如果是雙向綁定中的父組件數(shù)據(jù)，則可以觸發(fā)一個(gè)事件去通知父組件去更新對(duì)應(yīng)的值。
所以根據(jù)上面的描述，父組件需要有個(gè)監(jiān)聽(tīng)函數(shù)，子組件需要有個(gè)智能的 setData 函數(shù)。
不防將父組件的監(jiān)聽(tīng)函數(shù)命名為 onSyncAttrUpdate，將子組件的智能 setData 函數(shù)命名為 setDataSmart，則可以有如下代碼：
// 父組件Component({
methods: {
onSyncAttrUpdate(e) {
this.setData(e.detail) // 子組件傳來(lái)的需要更新的數(shù)據(jù) }
}
}
)// 子組件Component({
properties: {
childAttr: String, syncAttrMap: String }
, methods: {
// 子組件更新數(shù)據(jù)時(shí)，只要調(diào)用此方法即可，而不是 `setData` setDataSmart(data) {
// splitDataBySyncAttrMap 函數(shù)的實(shí)現(xiàn)過(guò)程就不說(shuō)了，只是將對(duì)象拆分，大家應(yīng)該都能實(shí)現(xiàn) let {
parentData, innerData}
= splitDataBySyncAttrMap(data, this.data.syncAttrMap) // 內(nèi)部數(shù)據(jù)使用 setData 更新 if (Object.keys(innerData).length) {
this.setData(innerData) // setData 中還支持 callback 的回調(diào)，為了簡(jiǎn)化代碼，這里不討論 }
// 雙向綁定的父組件數(shù)據(jù)觸發(fā)事件讓父組件自己去更新 if (Object.keys(parentData).length) {
this.triggerEvent('
syncAttrUpdate'
, parentData) }
}
}
}
)到此，一個(gè)簡(jiǎn)單的雙向綁定功能就完成了。
但是由于子組件也有可能包含其它組件，也就是說(shuō)子組件也可以是父組件，而父組件同樣也可以是子組件。
所以上面的 onSyncAttrUpdate setDataSmart 函數(shù)需要在每個(gè)組件中都實(shí)現(xiàn)，所以不防定義一個(gè)公共對(duì)象 BaseComponent 來(lái)實(shí)現(xiàn)上面的所有功能，如：
// BaseComponentconst BaseComponent = {
properties: {
syncAttrMap: String }
, methods: {
setDataSmart() {
// ... }
, onSyncAttrUpdate() {
// ... }
}
}
然后將 BaseComponent minin 到每個(gè)組件的對(duì)象上去就可以了；另外小程序中還有一個(gè)特殊的組件：
Page，雖然 Page 和 Component 結(jié)構(gòu)是兩樣的，但它也應(yīng)該算是一個(gè)組件，不過(guò)它一定是父組件，不可能是別的組件的子組件，所以還需要將 onSyncAttrUpdate 方法寫(xiě)了所有的 Page 定義中。
所有這些就是 minapp 的雙向綁定的基本原理了。
等等，最后還有一件事：
wxml 模板，不能讓用戶每次寫(xiě)雙向綁定的時(shí)候都要寫(xiě)那么復(fù)雜語(yǔ)句吧？當(dāng)然不用，minapp 在編譯時(shí)，會(huì)將模板做個(gè)簡(jiǎn)單的轉(zhuǎn)化：
謝謝，文章到此結(jié)束，歡迎關(guān)注 minapp：
重新定義微信小程序的開(kāi)發(fā)相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！推薦閱讀：
事件模型的詳解event loop如何使用以上就是微信小程序怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序 雙向 數(shù)據(jù)本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！
上一篇：
微信如何驗(yàn)證所有者
下一篇：
微信小程序的wx.request與Promise的結(jié)合使用相關(guān)文章相關(guān)視頻修改微信號(hào)有什么影響嗎？微信中共享實(shí)時(shí)位置什么意思數(shù)據(jù)庫(kù)設(shè)計(jì)的基本原則是什么？微信小程序調(diào)用圖片安全API微信小程序怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定React 雙向綁定 Mixin 源碼閱讀什么是微信小程序微信小程序HelloWorld創(chuàng)建微信小程序架構(gòu)分析微信小程序View組件和Flexbox彈性盒模型 [溫州做微信公眾號(hào)]