vue组件中的v-model

一个组件的 v-model 会使用 value prop 和 input 事件,但是在注入单选框，复选框中可能把value用做其他用途，这时候我们可以通过组件中的model参数来进行设定。

我们先看最简单的在input上v-model的使用：

<input type='text' v-model='username'/>

这在vue中其实是一个简化的写法，我们把他写完整，v-model就等价于下面这种形式：

<input type='text' :value='username' @input='username=$event.target.value'/>

这样看，v-model就相当于一个value值得绑定，和一个input事件得绑定，在用户输入得时候触发input事件，改变username为用户输入的值，然后在username值改变后，再赋值给input的value属性。这样的话，我们可以在js中改变username的值时，input输入框的value值也就可以改变了。其实是两个单向数据流模拟的一个双向数据流的效果。

在radio,单个checkbox和多个checkbox,select中的v-model和input中的v-model一样，也是语法糖，不同的就是，对于radio，checkbox来说，v-model处理的更复杂一些。

而本文的重点，是讲解v-model在组件中的结合model属性的使用。

v-model在组件中的使用

首先，我们确定实现一个手机端的自定义select的效果，效果图如下：

或者是这样：

先看一下我们不使用v-model的时候实现的部分代码：

let index=0;
export default{
	name:'picker-back',
	model:{
		prop:'val',
		event:'change'
	},
	props:['val','show','pdata','multiindex','indexs','tlt','type'],
	data(){
		return {
			index:1,
			finger:{starty:0,endy:0,lasttime:0,starttime:0,transformy:0,order:0},
			lineht:36,
			//记录当前的选中项
			checks:[]
		};
	},
｝

<Picker :show='payflag' :indexs='payindex' :pdata="payments" tlt='首付比例'   
@cancel='paycancel'  @confirm='payconfirm'></Picker>

我们实现这么一个组件的时候，需要传入选项的数据属性，是否显示属性，选中项的属性，选中时传递的事件，用起来是非常麻烦的。

下面我们主要看看同样使用v-model来实现这么一个效果的组件时，组件使用是多么简单。

v-model实现picker的代码如下：

<template>
<div  @click='togglewin()'>
	<slot></slot>
	<div class='pick-wrapper' @click.stop='hidewin()' v-show='pwin'>
	<div class='pick-win'>
		<div  v-for='p in pdata' @click.stop='checkitem(p)' 
		:class='{"pick-item":true,"pick-active":val.id==p.id}'>{{p.text}}</div>
	</div>
	</div>
</div>
</template>
<script>
export default{
	name:'pick-up',
	model:{
		prop:'val',
		event:'change'
	},
	props:['val','pdata'],
	data(){
		return {
			pwin:false
		}
	},
	methods:{
		checkitem(p){
			this.$emit('change',p);
			setTimeout(()=>{
				this.pwin=false;
			},500);
			
		},
		togglewin(){
			this.pwin=true;
		},
		hidewin(){
			this.pwin=false;
		}
	}

}
</script>
<style>
.pick-wrapper{position:fixed;z-index: 2;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.7);}
.pick-win{position:fixed;z-index: 2;left:0;right:0;bottom:0;background: #ffff;
	box-sizing: border-box;padding:12px 8px;border-top: 2px solid #565656;}
.pick-item{text-align:center;line-height:2.6;font-size:14px;}
.pick-active{background:#258CC1;color:#fff;}
</style>

因为是简单示意实现，所以没有给出移动端touch滑动的处理，仅做选中显示。

这个picker组件使用起来代码如下：

<PickerUp v-model='lornterm' :pdata='lornterms'>
	<div>{{lornterm.text}}</div>
</PickerUp>

仅仅一个v-model属性，和一个pdata属性用来传递数据，就完成了。而且组件中通过使用了未命名的slot，可以让用户自己选择选中某一项时，应该如果展示文字。同时保证lornterm的值和组件中的选中项同步。

需要注意的一点就是，数据中必须有id和text属性，id用来对比是否是选中项，text用做显示的文本。

当然，我们 还可以通过再实现一个pick-item的组件和这个pickup组件结合，让用户自己循环选项。

通过v-model的语法糖，我们可以让组件实现起来更简单，更使得组件使用起来更方便。

好吧，本文就到这里了，希望这篇文章能让对vue的v-model和组件有疑惑的人提供一些帮助。日后，我还会继续写一些有关vue使用以及webpack自动化相关的文章，敬请关注