Vue中v-model在组件中的使用
2018-02-02 23:34

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的效果,效果图如下:

image.png

或者是这样:

image.png

先看一下我们不使用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组件结合,让用户自己循环选项。

image.png

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

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

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1131)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1