2023年微信小程序 簡易雙向綁定

微信小程序 簡易雙向綁定

微信小程序是一種非常流行的快速開發(fā)應(yīng)用程序的工具，而簡易雙向綁定是其中一個(gè)非常有用的功能。通過它，我們可以實(shí)現(xiàn)頁面上數(shù)據(jù)的雙向綁定，在用戶修改頁面上的數(shù)據(jù)時(shí)，可以自動(dòng)更新數(shù)據(jù)模型，從而避免手動(dòng)操作。

1. 雙向綁定語法

在 WXML 中，普通的屬性的綁定是單向的。如果要在用戶輸入時(shí)同時(shí)改變數(shù)據(jù)模型，需要借助簡易雙向綁定機(jī)制。此時(shí)，可以在對(duì)應(yīng)項(xiàng)目之前加入 ?model?: 前綴。

用于雙向綁定的表達(dá)式有如下限制：

1. 只能是一個(gè)單一字段的綁定；如<input model:value="值為 {{value}}" />和<input model:value="{{ a + b }}" />都是非法的；
2. 目前，尚不能使用 data 路徑，如<input model:value="{{ a.b }}" />這樣的表達(dá)式目前暫不支持。

2. 在自定義組件中傳遞雙向綁定

雙向綁定同樣可以使用在自定義組件上。自定義組件可以將自身的 ?屬性? 雙向綁定到組件內(nèi)部的元素屬性上。這樣，當(dāng)組件內(nèi)部元素屬性的值更改時(shí)，自定義組件的屬性也會(huì)相應(yīng)地進(jìn)行更新。

3. 在自定義組件中觸發(fā)雙向綁定更新

自定義組件還可以自己觸發(fā)雙向綁定更新。做法就是：使用 setData 設(shè)置自身的屬性。如果頁面中使用了該組件，并且指定了一個(gè)數(shù)據(jù)對(duì)象作為其屬性值，在組件內(nèi)部調(diào)用 setData 更新屬性之后，頁面對(duì)應(yīng)路徑的數(shù)據(jù)也會(huì)發(fā)生變化，從而使得頁面渲染發(fā)生改變。

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