微信小程序開發(fā)簡單雙向綁定

微信小程序簡單雙向綁定 微信小程序在基礎庫2.9.3開始支持簡單雙向綁定，該機制可以幫助開發(fā)者方便地完成用戶輸入與數(shù)據(jù)的綁定。本文將向您介紹微信小程序中簡單雙向綁定的語法以及如何在自定義組件中應用。 1. 雙向綁定語法 在WXML中，普通的屬性的綁定是單向的。如果需要在用戶輸入的同時改變data的值，則需要借助簡易雙向綁定。此時，在對應項目之前加入model:前綴即可實現(xiàn)雙向綁定。在使用input輸入框時，代碼如下：

<input model:value="{{value}}" />

如果輸入框中的內(nèi)容被修改，那么data中相應的value也會被修改。 注意：用于雙向綁定的表達式只能是一個單一字段的綁定，不支持含有運算符的表達式，并且目前還不能使用data路徑，例如a.b。 2. 在自定義組件中傳遞雙向綁定 雙向綁定同樣可以使用在自定義組件上。我們可以將自定義組件內(nèi)部的屬性與組件外部的屬性進行綁定，這樣只要在頁面調(diào)用該組件并傳入相應的屬性值，那么輸入框中的值發(fā)生變化的同時，自定義組件內(nèi)部的屬性以及頁面中相對應的屬性都會發(fā)生變化。下面是示例代碼：

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})


<input model:value="{{myValue}}" />

在使用自定義組件時，我們只需要將頁面的data中的屬性值傳遞給組件即可。示例如下：

<custom-component model:my-value="{{pageValue}}" />

如果輸入框中的內(nèi)容被修改，那么組件內(nèi)部的myValue屬性值以及頁面的pageValue屬性值均會相應地更新。 3. 在自定義組件中觸發(fā)雙向綁定更新 自定義組件還可以自己觸發(fā)雙向綁定更新。這種情況下，需要使用setData來設置自身的屬性值。具體實現(xiàn)，請參見以下代碼：

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

在使用該自定義組件時，我們只需要將頁面上data中的屬性值傳遞給組件即可。如下所示：

<custom-component model:my-value="{{pageValue}}" />

當組件調(diào)用setData更新myValue值時，頁面的對應屬性值以及WXML中所有綁定了該屬性值的位置都會相應地更新。 通過簡單雙向綁定機制，開發(fā)者可以輕松完成用戶輸入與數(shù)據(jù)的綁定。在實際開發(fā)中，我們可以根據(jù)業(yè)務場景的不同來合理運用簡單雙向綁定機制，提高開發(fā)效率和用戶體驗。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標明：himall原創(chuàng)>