vue教程:封装了一个checkbox组件,vue如何封装组件


工作中发现默认vue绑定checkbox很不方便,存在下面几个问题。

1、如果传递的数值不是数值,那默认绑定值就会转为true或false但是作为后端人员,true或flase这类值一般都是用数值型字段来保存,比如1和0,我们后台传递出来的数据往往就直接是0或1.

2、如果有多个checkbox,那就需要传递的数值是数组,但是实际中往往一组checkbox提交后台后,就是保存在一个nvarchar字段中,如果需要和前台配合,在读取的时候就需要把字符串转为数组才能实现双向绑定。

基于以上原因,封装了一个checkbox组件,代码如下,希望对大家有帮助。

//ui-checkbox组件
Vue.component("ui-checkbox", {
 props: {
 value: { default: "" },
 dataSource: { default: []}
 },
 data:function(){
 return {
 checkedModel:this.value
 }
 },
 watch:{
 value:function (newValue)
 {
 if (Array.isArray(newValue))
 {
 this.checkedModel = newValue;
 }
 else
 {
 this.checkedModel = newValue.toString().split(",");
 }
 }
 },
 methods: {
 onChange: function(event)
 {
 if (this.dataSource.length <= 1)
 {
 //如果数据源只有一个,清除所有数组,保证干净的数据传递到后台。
 this.checkedModel.splice(0,this.checkedModel.length);
 }
 var $obj = event.target;
 if ($obj.checked)
 {
 if (this.checkedModel.indexOf($obj.value)<0)
 {
 this.checkedModel.push($obj.value);
 }
 }
 else
 {
 this.checkedModel.Remove($obj.value);
 }
 console.log(this.checkedModel)
 }
 },
 created: function () {
 if (Array.isArray(this.value)) {
 this.checkedModel = this.value
 }
 else {
 this.checkedModel = this.value.toString().split(",");
 }
 },
 template:`
 
 `
});

单选的调用方法


这样就可以保证选种后CanExpand的值为1,如果不选,值就为空,在后台很容易处理。
如果有多个选项,可以这样调用:


在父级调用的时候,v-model可以传递逗号隔开的字符串,也可以直接传递数组,更具有实用性。

以上是本人工作中的一些小技巧,欢迎大家关注转发并讨论。