微信小程序中實(shí)現(xiàn)雙向綁定的實(shí)戰(zhàn)過程

更新時間：2023年01月19日 09:56:14 作者：軍軍君01

最近在小程序的開發(fā)過程中,需要用到雙向綁定,遇到報錯才知道微信本身是不支持對象雙向綁定的,折騰一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中實(shí)現(xiàn)雙向綁定的相關(guān)資料,需要的朋友可以參考下

一、雙向綁定

在微信小程序中如何實(shí)現(xiàn)雙向綁定？在開始之前先介紹下什么是雙向綁定，js中定義變量數(shù)據(jù)后，通過{{}}綁定到模板中，這個過程是單向綁定，即數(shù)據(jù)的更新只能是js中更新了數(shù)據(jù)，模板中跟著修改。但是如果模板中修改數(shù)據(jù)的話，js中對應(yīng)的變量數(shù)據(jù)也跟著修改則為雙向綁定。

1. vue2中雙向綁定實(shí)現(xiàn)

form元素綁定：

官網(wǎng)說明：https://v2.cn.vuejs.org/v2/api/#v-model

主要通過v-model指令實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，實(shí)例如下：

	<!-- 當(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>

自定義組件綁定：

官網(wǎng)說明：https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

通過v-model進(jìn)行綁定，組件中需要聲明change事件以及value 的prop，數(shù)據(jù)發(fā)生變化時通過：$emit(‘change’, value)的方式實(shí)現(xiàn)數(shù)據(jù)變動的通知，value 的prop用于接收父組件更新參數(shù)。

一個組件上的 v-model 默認(rèn)會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value attribute 用于不同的目的。

具體實(shí)例如下：

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中雙向綁定實(shí)現(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不太一樣。

要讓這個例子實(shí)際工作起來，組件內(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ù)的更新。

簡單綁定實(shí)例如下：

父組件

<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)換即可，具體實(shí)例如下：

父組件

<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'
				})
			});
		}
	}
})