微信小程序實現數據雙向綁定的方法

這篇文章將為大家詳細講解有關微信小程序實現數據雙向綁定的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在原生小程序開發中，數據流是單向的，無法雙向綁定，但是要實現雙向綁定的功能還是蠻簡單的！

下文要講的是小程序框架 minapp 中實現雙向綁定的原理，在 minapp 中，你只需要在 wxml 模板中給組件的屬性名后加上 .sync 就可以實現雙向綁定。下面為了解釋其原理，過程可能會說的稍微復雜些，但其實 minapp 框架已經處理了那些繁雜的細節！

首先，要使數據雙向綁定，應該避免過多的數據源。
在數據從上到下自然流動的情況下，如果每個組件中都維護它們自己的數據，而又要保持它們數據值的一致，這雖然可以做到，但實現過程并不會簡單。
但是也沒必要說為了有一個統一的數據源就使用 mobx 或 redux 來全局管理數據，這就有點殺雞用牛刀的感覺了。
由于雙向綁定只存在于父子組件之間，而數據又是從父到子傳遞的，所以可以優先使用父組件中的數據為數據源，
子組件每次更新數據并不更新它自己內部的數據，而是通過事件機制觸發父組件更新它的數據，而父組件更新數據后又會將更新的數據自然地傳給子組件，
由此達到數據的雙向流動！

并不是所有數據都需要雙向綁定，也并不是所有數據都是對外的，子組件還可以有它自己的一個內部數據。所以這就涉及到我們要說的第二個問題：區分哪些數據需要雙向綁定，哪些數據又需要子組件自己維護。

用過 vue 的應該都知道，在 vue 中要實現雙向綁定，需要在模板中做特殊處理。比如要將父組件的 parentAttr 雙向綁定到子組件的 childAttr 上，需要在父組件的模板中這樣寫：

<child childAttr.sync="parentAttr" />

但是小程序并沒有這樣的簡單的語法，小程序的 wxml 語言的屬性名中甚至都不允許出現 " . " 這樣的字符。回到我們的問題上來，子組件需要知道哪些屬性需要雙向綁定，哪些屬性需要自己維護，
給模板加個字段（syncAttrMap）專門來告訴子組件需要雙向綁定的數據集合不就行了么。如，可以將上面的示例寫成微信小程序支持的寫法：

<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" /><!--  如果同時存在多個雙向綁定和不需要雙向綁定的屬性時，可以寫成下面這樣：  p1, p2 分別雙向綁定到子組件的 c1, c2，而 p3 單向綁定到 c3 上--><child c1="{{p1}}" c2="{{p2}}" c3="{{p3}}" syncAttrMap="c1=p1&c2=p2" />

接著，就需要處理子組件數據更新的問題了，在子組件中有兩部分數據，一部分是內部數據，另一部分是父組件中的數據，
子組件可以通過讀取屬性 syncAttrMap 來得到哪些數據是內部的數據，哪些數據是父組件的數據，并且可以知道對應
的父組件中的數據的鍵名是什么。由于原生的組件方法 setData 不會管你是內部數據，還是父組件中的數據，只要
你調用它去更新數據，它只會更新內部的數據。所以需要另外實現一個新的方法，來自動判斷數據源，如果是內部數據，
則直接調用 setData ；如果是雙向綁定中的父組件數據，則可以觸發一個事件去通知父組件去更新對應的值。

所以根據上面的描述，父組件需要有個監聽函數，子組件需要有個智能的 setData 函數。不防將父組件的監聽函數
命名為 onSyncAttrUpdate，將子組件的智能 setData 函數命名為 setDataSmart，則可以有如下代碼：

// 父組件Component({
  methods: {
    onSyncAttrUpdate(e) {
      this.setData(e.detail) // 子組件傳來的需要更新的數據
    }
  }})

<!-- 父組件的模板 --><child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" bind:syncAttrUpdate="onSyncAttrUpdate" />

// 子組件Component({
  properties: {
    childAttr: String,
    syncAttrMap: String  },
  methods: {
    // 子組件更新數據時，只要調用此方法即可，而不是 `setData`
    setDataSmart(data) {
      // splitDataBySyncAttrMap 函數的實現過程就不說了，只是將對象拆分，大家應該都能實現
      let {parentData, innerData} = splitDataBySyncAttrMap(data, this.data.syncAttrMap)      // 內部數據使用 setData 更新
      if (Object.keys(innerData).length) {
        this.setData(innerData) // setData 中還支持 callback 的回調，為了簡化代碼，這里不討論
      }
      // 雙向綁定的父組件數據觸發事件讓父組件自己去更新
      if (Object.keys(parentData).length) {
        this.triggerEvent('syncAttrUpdate', parentData)      }
    }
  }})

到此，一個簡單的雙向綁定功能就完成了。但是由于子組件也有可能包含其它組件，也就是說子組件也可以是父組件，而父組件同樣也
可以是子組件。所以上面的 onSyncAttrUpdate setDataSmart 函數需要在每個組件中都實現，所以不防
定義一個公共對象 BaseComponent 來實現上面的所有功能，如：

// BaseComponentconst BaseComponent = {
  properties: {
    syncAttrMap: String  },
  methods: {
    setDataSmart() {
      // ...
    },
    onSyncAttrUpdate() {
      // ...
    }
  }}

然后將 BaseComponent minin 到每個組件的對象上去就可以了；另外小程序中還有一個特殊的組件：Page，雖然 Page 和 Component 結構是兩樣的，
但它也應該算是一個組件，不過它一定是父組件，不可能是別的組件的子組件，所以還需要將 onSyncAttrUpdate 方法寫了所有的 Page 定義中。
所有這些就是 minapp 的雙向綁定的基本原理了。

等等，最后還有一件事：wxml 模板，不能讓用戶每次寫雙向綁定的時候都要寫那么復雜語句吧？當然不用，minapp 在編譯時，會將模板做個簡單的轉化：

<child childAttr.sync="parentAttr" /><!-- 由于屬性名 syncAttrMap 是固定的，所以完全可以通過編譯手段，將上面的模板轉成下面這個模板 --><child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />

關于“微信小程序實現數據雙向綁定的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。