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