VantUi-Field小程序组件批量进行双向数据绑定

VantUi小程序组件库的input输入框当中可以绑定value属性值，但是当value被改变的时候，输入框的内容并不能同步变化。所以我们只能使用bind:change方法绑定输入事件。在其回调函数中获取当前输入框的值，并且赋值给value。

而但我们在遇到表单页面开发的时候，一个表单页面可能涉及10多个输入框，我们需要一个一个的绑定对应的回调函数，并且为其value进行赋值。这样高度代码高度耦合，整体阅读性降低。

解决方法：

• 所以我们可以将一个表单的value都存放到一个对象当中，方便管理

  data: {
  	applicationForm: {
  		username: ""
  	},
  }
  

• 并且给每一个输入框绑定同一个回调函数，但是每一个输入框创建一个独有的data-type属性，属性值为value和表单对象所对应属性名；例如一个输入用户姓名的输入框组件，我们对其data-type属性绑定，属性值为username

  <van-field bind:change="inputEvent" data-type="username" value="{{ applicationForm.username}}">
  </van-field>
  

  请注意data-type属性对应值和value绑定的值，data-tpye的值是跟表单对应的属性名是一致的

• 回调函数inputEvent中获取data-type的值，进行动态赋值；通过[]字符串拼接，对对象的属性进行赋值 重点!!!

  // e.currentTarget.dataset.type事件对象拿到组件绑定的值
  inputEvent(e) { // 输入框双向绑定
  	this.setData({
    		['applicationForm.' + e.currentTarget.dataset.type]: e.detail
  	})
  },
  

这样我们就可以实现一个回调函数，对多个表单组件进行批量的双向数据绑定了,，第一次发博客喜欢点个赞ε≡٩(๑>₃<)۶~~~~~

最后再来一个小例子方便理解

<van-field bind:change="changeEvent" data-type="age" value="{{ applicationForm.age}}">
</van-field>
<van-field bind:change="inputEvent" data-type="sex" value="{{ applicationForm.sex}}">
</van-field>

	changeEvent(e) { // 输入框双向绑定
    	this.setData({
      		['applicationForm.' + e.currentTarget.dataset.type]: e.detail
    	})
	},