微信小程式----簡易雙向繫結
阿新 • • 發佈：2020-12-08
簡易雙向繫結
基礎庫 2.9.3 開始支援，低版本需做相容處理。
在 WXML 中，普通的屬性的繫結是單向的。例如：
<input value="{{value}}" />
在【基礎庫 2.9.3 】之前，屬性的繫結是單向的，在上邊的例項中在檢視層修改value，只會改變檢視層的value，不會對邏輯層的value（this.data.value）進行修改。但是又需要同時修改邏輯層value（this.data.value），怎麼做呢？就是採用input元件的bindinput觸發事件實現。
實現單向資料的雙向繫結
單向資料的WXML
<input bindinput="getCurrentValue" value="{{value}}" />
單向資料的JS
getCurrentValue(e){
this.setData({value: e.detail.value})
}
實現原理：通過觸發bindinput事件，實時監聽value的值，然後通過微信小程式提供的this.setData方法，同時對邏輯層(this.data.value)和檢視層(value)進行修改。這樣就實現資料的雙向繫結！
簡易雙向繫結
<input model:value="{{value}}" />
微信小程式提供的簡易雙向繫結，在輸入框修改value的時候，邏輯層（this.data.value）和檢視層（value）就會同時進行修改，優化了呼叫this.setData的消耗！
注意
- 只能是一個單一欄位的繫結；
- 目前，尚不能 data 路徑。
反例(不支援)
<input model:value="值為 {{value}}" />
<input model:value="{{ a + b }}" />
<input model:value="{{ a.b }}" />
WXRUI體驗二維碼
