vue 自定义v-model 封装地址选择组件，并实现数据绑定和表单验证

vue 自定义v-model 封装地址选择组件，并实现数据绑定和表单验证

vue是双向数据绑定的，v-model可以自动搜集数据，这在我们使用过程中可以说是非常方便。但是，在开发中，如果想把代码写的更精简，提供更多的复用。那么我们就免不了想自己封装一个用有v-model属性的组件。（本人工作中，就迫切有这种需求，因为表单页面太大，如果不做封装精简，就算用了element-ui这种已经封装过的框架，页面依然会很庞大！）

关于v-model

要实现自己的v-model，首先要了解到，v-model实际上是由两部分组成的，即value和input事件，例如下面两行代码，是等价的

知道了原理，我们就可以开干了。
下面以分装一个三联动地址选择的小组件为例，使用的select基于element-ui
新建vue组件choose-address-form-item.vue
这里封装一个表单中的地址选择组件，所以默认认为他的父组件由标签

封装组件

先上html部分代码，代码使用flex布局，样式相关的类名可忽略。这里说明下 rowStart样式：

.rowStart {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

        
            

                
                
                    
                    
                
                
                    
                    
                
                
                    
                    
                
                
            
            {{fullAddress}}
        
    

这里重点说下el-select和el-input的拆分。el-select本来的v-model被重新写为 :value="address.provinceId" @input="changeProvince"

由于地址里面有三个input标签，为了方便处理，并且能实现表单验证，所以统一用address来接收数据
address.provinceId是省，address.cityId是城市，address.districtId是县
el-form-item上，:prop="addressProp"，指定prop用于设置prop属性，便于表单验证。
isNotTwoLevels 用于判断是否是直辖市，直辖市只有两级，隐藏县级。

下面看看js部分

首先说下props部分

重点的:

 defaultAddress:{
                type:Object,
                default:()=>{
                    return {}
                }
            },//默认地址

考虑到编辑状态，会从后台获取数据显示默认数据，用defaultAddress接收，
对应的需要在watch里面做监听。并把值赋给address

 watch:{
            defaultAddress:{
                deep:true,
                handler:async function (value) {
                    console.log(value)
                    if(!value){
                        //没有数据时，清空
                        this.address={}
                        this.cityList=[]
                        this.districtList=[]
                    }
                    let {cityId,provinceId,districtId ,street }=value
                    //有数据时只允许更新一次
                    if(this.getDefault) return
                    if(provinceId && cityId){
                        let cityList = await reqRegionInfo(provinceId)
                        this.cityList=cityList
                        let districtList = await reqRegionInfo(cityId)
                        this.districtList=districtList
                        //console.log(districtList)
                        this.isNotTwoLevels=!!districtList.length
                        this.address={...value}
                        this.getDefault=true
                        let province=provinceId ? this.provinceList.filter(item=>item.regionCode===provinceId)[0].regionName : ''
                        let city=cityId ? cityList.filter(item=>item.regionCode===cityId)[0].regionName : ''
                        let district=districtId ? districtList.filter(item=>item.regionCode===districtId)[0].regionName : ''
                        this.fullAddress=`${province} ${city} ${district} ${street}`
                    }
                }
            },
        }

methods部分

看重点：

 // 点击切换省份
            changeProvince(val){
                this.$set(this.address,'provinceId',val)
                this.$set(this.address,'cityId','')
                this.$set(this.address,'districtId','')
                this.$set(this.address,'street','')
                this.districtList  = []
                this.cityList  = []
                this.getRegionInfo(val,1)
                let thisProvince=this.provinceList.filter((item,index)=>item.regionCode===val)
                // //console.log(thisProvince)
                this.projectAddress[1]=this.projectAddress[2]=''
                this.projectAddress[0]=[thisProvince[0].regionName]
                this.address.projectAddress= this.projectAddress
                this.$emit('input',this.address)
            },
            // 点击切换城市
            changeCity(val){
                this.districtList  = []
                this.getRegionInfo(val,2)
                this.$set(this.address,'cityId',val)
                this.$set(this.address,'districtId','')
                // //console.log(this.cityList)
                let thisCity=this.cityList.filter(item=>item.regionCode===val)
                this.projectAddress[2]=''
                this.projectAddress[1]=thisCity[0].regionName
                this.address.projectAddress= this.projectAddress
                this.$emit('input',this.address)
            },
            //详细地址输入
             streetInput(value){
                this.$set(this.address,'street',value)
                this.$emit('input', this.address)
            }

这里的重点在于，当下拉框发生改变，输入框发生改变时，要及时把数据返给父级组件：
在changeProvince函数中，changeCity函数中，streetInput中，均需要执行 this.$emit('input',this.address)

组件使用和表单验证

封装完了，开始使用
在views中新建form.vue，并且引用ChooseAddressFormItem组件：

 import ChooseAddressFormItem from ../components/ChooseAddressFormItem.vue

在form.vue template中使用：

这里重点有三：
第一个是v-model="projCardForm.address"，这里是数据绑定；
第二是addressProp=“address，指定子组件prop属性，用于表单验证，
第三，表单验证：下面仔细说下表单验证
由于要验证的是一个对象，并且还有存在直辖市等特殊情况，不能依靠element-ui本身的基础验证，需要自定义，在表单验证数据rules中

rules: {
              address:[{validator:(rule, value, callback)=>validAddressInfo(rule, value, callback),trigger:['blur', 'change']}],
          },

element-ui提供了自定义验证方式validator函数，参数有rule,value,callback，这里单独去定义一个验证函数
src下面新建utils文件夹，utils文件夹下面新建validateMethods.js
在validateMethods.js里面定义地址验证方法
validateMethods.js

//检查地址是否完善——地址封装组件
export const validAddressInfo=(rule, value, callback,msg='请完善地址信息')=>{
//如果值不是对象，肯定不通过，调用  callback(new Error(msg))函数
   if(!value || !(value instanceof Object)){
       callback(new Error(msg))
       return
   }
   let {districtId,isNotTwoLevels,showStreet,street}=value
   //显示地址输入框的时候，如果地址输入框没有值，肯定不通过
   if(showStreet){
       if(!street){
           callback(new Error(msg))
           return
       }
   }
   最后的情况，非直辖市情况下，没有县id，肯定不通过
   if(!districtId && isNotTwoLevels){
       callback(new Error(msg))
   }
}

那么现在在form.vue中引入地址验证函数validAddressInfo，然后赋值给rule中的validator就行

到此，组件封装和使用讲完。不仅简化了代码，而且数据绑定，表单验证都没少。
后面附上组件全部代码
由于本组件地址联动数据通过服务器请求获取的，请自动忽略，你只需要找到相关数据对上即可