一个组件的 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属性的使用。
首先,我们确定实现一个手机端的自定义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自动化相关的文章,敬请关注