uni-app使用v-model

做 uni-app 报名表单时，被微信原生 bindinput + setData 写法烦到了，才回头用 v-model 把字段绑回 Vue 那套。下面记录一下从语法糖到落地的过程。

v-model 介绍

首先明确一点，v-model仅仅是语法糖。

在 H5 里大家很熟悉；到了小程序端，uni-app 编译后会把这层糖还原成 :value + @input（或平台等价事件），所以别把它当成黑魔法。

<input type="text" v-model="something">

等价于

  <input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

它将一个较复杂的input双向数据绑定简化了他的书写方式。多个字段时，formItem 挂一个对象，比每个 input 单独 setData 清爽得多。

微信小程序绑定input

最开始我是使用微信推荐的写法

<input bindtap="input" />

注意：原生写法一般是 bindinput，不是 bindtap；上面是当年笔记里的笔误，思路不变——在 js 里解析 event.detail.value，再 setData 写回 data。字段一多，回调里全是重复的取值赋值。

然后在js里面解析event，然后再setData

uni-app下v-model的写法

本文采用uni-app自定义组件模式

自定义组件模式下，.vue 单文件里直接写 v-model，和写 Vue 页面差不多。下面是一个报名表的片段，姓名、手机、赛点三个字段共用 formItem：

wxml

...
<form @submit="formSubmit" @reset="formReset" :model="formItem" class="tm-every-center padding bg-white">
					<view class="section flex align-center">
						<view class="section__title">姓名：</view>
						<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.name" />
					</view>
					<view class="section flex align-center">
						<view class="section__title">手机：</view>
						<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.phone" />
					</view>
					<view class="section flex align-center">
						<view class="section__title">赛点：</view>
						<input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.competition" />
					</view>
					<view class="btn-area margin-top"><button formType="submit" class="cu-btn">提交</button></view>
				</form>
				...

然后在data里面设置

formItem: {
				name:'',
				phone:'',
				competition: ''
			}

submit 里如果直接写 formItem 会找不到变量，要用 this.formItem。另外示例里三个 input 的 name 都写成了 name，真机校验或 form 收集时可能串字段，按业务改成 phone、competition 更稳。

在submit事件回调里面就可以这样写

submit(){
	this.$api.post(this.formItem).then(res => {
	})
}

v-model 改的是 formItem 里的值，提交时整包丢给接口即可，不必再从 event 里抠。自定义组件里若 v-model 不生效，检查是否开了「自定义组件模式」，以及 input 是否被包在会阻断事件的 view 里。

版权声明: 本文首发于 指尖魔法屋-uni-app使用v-model（https://blog.thinkmoon.cn/post/313-guide-uni-app-model/） 转载或引用必须申明原指尖魔法屋来源及源地址！