微信小程式怎麼實現資料雙向綁定

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

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

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

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

用過 vue 的應該都知道，在 vue 中要實作雙向綁定，需要在範本中做特殊處理。例如要將父元件的parentAttr 雙向綁定到子元件的childAttr 上，需要在父元件的範本中這樣寫：

<child></child>

但是小程式並沒有這樣的簡單的語法，小程式的wxml 語言的屬性名稱中甚至都不允許出現" . " 這樣的字元。回到我們的問題上來，子元件需要知道哪些屬性需要雙向綁定，哪些屬性需要自己維護，
給範本加個欄位（syncAttrMap）專門來告訴子元件需要雙向綁定的資料集合不就行了麼。如，可以將上面的範例寫成微信小程式支援的寫法：

<child></child><child></child>

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

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

// 父组件Component({
  methods: {
    onSyncAttrUpdate(e) {
      this.setData(e.detail) // 子组件传来的需要更新的数据
    }
  }})

<child></child>

// 子组件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></child><child></child>

谢谢，文章到此结束，欢迎关注 minapp：重新定义微信小程序的开发

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

事件模型的详解

event loop如何使用

以上是微信小程式怎麼實現資料雙向綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！