微信小程序中實現(xiàn)雙向綁定的實戰(zhàn)過程
一、雙向綁定
在微信小程序中如何實現(xiàn)雙向綁定？在開始之前先介紹下什么是雙向綁定，js中定義變量數(shù)據(jù)后，通過{{}}綁定到模板中，這個過程是單向綁定，即數(shù)據(jù)的更新只能是js中更新了數(shù)據(jù)，模板中跟著修改。但是如果模板中修改數(shù)據(jù)的話，js中對應(yīng)的變量數(shù)據(jù)也跟著修改則為雙向綁定。
1. vue2中雙向綁定實現(xiàn)
form元素綁定：
官網(wǎng)說明：https://v2.cn.vuejs.org/v2/api/#v-model
主要通過v-model指令實現(xiàn)數(shù)據(jù)的雙向綁定，實例如下：
<!-- 當(dāng)選中時，`picked` 為字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 為 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當(dāng)選中第一個選項時，`selected` 為字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
自定義組件綁定：
通過v-model進(jìn)行綁定，組件中需要聲明change事件以及value 的prop，數(shù)據(jù)發(fā)生變化時通過：$emit(‘change’, value)的方式實現(xiàn)數(shù)據(jù)變動的通知，value 的prop用于接收父組件更新參數(shù)。
一個組件上的 v-model 默認(rèn)會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value attribute 用于不同的目的。
具體實例如下：
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
使用的時候通過v-model進(jìn)行綁定：
<base-checkbox v-model="lovingVue"></base-checkbox>
2. vue3中雙向綁定實現(xiàn)
form元素綁定：
官網(wǎng)說明：https://v2.cn.vuejs.org/v2/guide/forms.html
vue3中表單元素的綁定類似于vue2,具體可參考上述鏈接。
你可以用 v-model 指令在表單 、 及 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。
自定義組件綁定：
官網(wǎng)說明：https://cn.vuejs.org/guide/components/events.html#usage-with-v-model
類似vue2中的使用方式，但是有個區(qū)別是事件時‘update:modelValue’，接收的參數(shù)是’modelValue’，和vue2不太一樣。
要讓這個例子實際工作起來， 組件內(nèi)部需要做兩件事：
將內(nèi)部原生 input 元素的 value attribute 綁定到 modelValue prop輸入新的值時在 input 元素上觸發(fā) update:modelValue 事件
3. 小程序中簡易雙向綁定
官網(wǎng)說明：https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html
雙向綁定時只能使用單一字段綁定，復(fù)雜的對象無法綁定：
用于雙向綁定的表達(dá)式有如下限制：
只能是一個單一字段的綁定，如
<input model:value="值為 {{value}}" /><input model:value="{{ a + b }}" />
都是非法的；目前，尚不能 data 路徑，如
<input model:value="{{ a.b }}" />
這樣的表達(dá)式目前暫不支持。
組件中更新數(shù)據(jù)需要通過this.setData進(jìn)行更新，另注意綁定value的類型一定要對應(yīng)，不然觸發(fā)不了雙向綁定數(shù)據(jù)的更新。
簡單綁定實例如下：
父組件
<child model:value="{{value}}"></child>
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
value: '測試1'
},
})
{
"usingComponents": {
"child":"/components/test/child"
}
}
子組件
<view>value內(nèi)容：{{value}}</view>
<button bindtap="updateValue">更新數(shù)據(jù)</button>
Component({
/**
* 組件的屬性列表
*/
properties: {
value: String
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
updateValue() {
this.setData({
value: '測試222'
});
}
}
})
二、問題
如果微信小程序中綁定的value是一個對象，使用雙向綁定時會出現(xiàn)堆溢出的異常：
父組件：
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
value: {
id: 1,
name: '測試1'
}
},
})
<child model:value="{{value}}"></child>
子組件：
/**
* 組件的屬性列表
*/
properties: {
value: Object
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
updateValue() {
this.setData({
value: {
id: 2,
name:'測試'
}
});
}
}
<view>value內(nèi)容：{{value}}</view>
<button bindtap="updateValue">更新數(shù)據(jù)</button>
異常：
VM414 WAService.js:1 RangeError: Maximum call stack size exceeded
at Function.i.safeCallback (VM414 WAService.js:1)
at l.<anonymous> (VM414 WAService.js:1)
at c.doUpdates (VM414 WAService.js:1)
at $n (VM414 WAService.js:1)
at fi (VM414 WAService.js:1)
at gi (VM414 WAService.js:1)
at fi (VM414 WAService.js:1)
at Di._updateValues (VM414 WAService.js:1)
at Di.updateValues (VM414 WAService.js:1)
at c._updateCb (VM414 WAService.js:1)
具體如下：
三、方案
可將對象通過JSON.stringify轉(zhuǎn)換為字符串進(jìn)行綁定，子組件如果需要使用對象時，使用JSON.parse進(jìn)行轉(zhuǎn)換即可，具體實例如下：
父組件
<child model:value="{{value}}"></child>Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
value: JSON.stringify({
id: 1,
name: '測試1'
})
},
})
子組件
<view>value內(nèi)容：{{value}}</view>
<button bindtap="updateValue">更新數(shù)據(jù)</button>// components/test/child.js
Component({
/**
* 組件的屬性列表
*/
properties: {
value: String
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
updateValue() {
this.setData({
value: JSON.stringify({
id: 2,
name:'測試222'
})
});
}
}
})
總結(jié)
到此這篇關(guān)于微信小程序中實現(xiàn)雙向綁定的文章就介紹到這了,更多相關(guān)微信小程序雙向綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序webview中監(jiān)聽返回按鈕實現(xiàn)步驟
在微信小程序中webview返回鍵是一個非常實用的功能,它允許用戶在嵌入的網(wǎng)頁中返回到上一個頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實現(xiàn)步驟,需要的朋友可以參考下2024-08-08
這篇文章主要為大家介紹了前端Token?組成及生成方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本文通過實例代碼給大家介紹了bootstrap中的導(dǎo)航條，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
個人網(wǎng)站留言頁面（前端jQuery編寫、后臺php讀寫MySQL）
這篇文章主要為大家介紹了個人網(wǎng)站的留言頁面，前端使用jQuery編寫、后臺利用php簡單讀寫MySQL數(shù)據(jù)庫，感興趣的小伙伴們可以參考一下2016-05-05
javascript 自動標(biāo)記來自搜索結(jié)果頁的關(guān)鍵字
使用javascript自動標(biāo)記來自搜索結(jié)果頁的關(guān)鍵字的實現(xiàn)代碼。2010-01-01
JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景，文章通過圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
js location.replace與location.reload的區(qū)別
js location.replace與location.reload的區(qū)別，經(jīng)常能用的到，需要的朋友可以可以下。2010-09-09
這篇文章主要為大家詳細(xì)介紹了基于canvas實現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
jquery實現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動
這篇文章主要介紹了jquery實現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動,需要的朋友可以參考下2014-03-03
本篇文章主要是對JS文本獲得焦點清除文本文字的示例代碼進(jìn)行介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01