vue.js实现只能输入数字的输入框(2)

这个时候,要实现反向的绑定,那就需要在组件里为外面的数据添加监听器。有对象,有属性名,为它加监听器,是可以加的,但是外面的属性要绑定哪个组件里的输入框呢?所以组件上要再添加一个属性ref,这个ref是vue定义的一个属性,用来找子组件的。这样,代码最终就变成

<div> <number ref="val1" objname="mydata" keys="val1"></number> <number ref="val2" objname="mydata" keys="val2"></number> <number ref="val3" objname="mydata" keys="val3"></number> <p>第一个输入框的内容是: {{val1}}</p> <p>第二个输入框的内容是: {{val2}}</p> <p>第三个输入框的内容是: {{val3}}</p> <input v-model="val1"> <input v-model="val2"> <input v-model="val3"> </div>

num.js里面

Vue.component('number', { props: ['objname', 'keys'], template: '<input type="text" v-model="con">', data: function(){ return { con: '' } }, mounted: function(){ var self = this; window.addEventListener('load', function(){ eval(self.objname+'.$watch(\''+self.keys+'\',function(val){this.$refs.'+self.keys+'.con=val})'); }) }, watch: { con: function(val){ this.con = val.replace(/\D/g, ''); eval(this.objname+'[this.keys]=this.con'); } }, })

这样,数据就实现了双向绑定。在mounted里面,addEventListener方法是有兼容问题的,IE8及以下版本没有这个方法,我这里没有做兼容处理。然后就是优化,看代码就发现,在number标签上,ref和keys实际上是一样的,可不可以只用一个?经过实验,在组件内部获取ref的值获取不到,这个我还不知道怎么获取,学得不够深呐。然后就是objname可不可以不传,不传的话就默认是组件的父对象,这个是可以实现的。最后,组件还可以进行一些扩展,比如再添加一个属性mytype,mytype不传则默认输入框只能输入数字,如果为word,则输入框只能输入字母和数字,如果为chinses,则只能输入中文汉字等。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f1b76afde0b0ca878b93991c14b4b418.html