自定义组件使用model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

这是vue官网对自定义组件使用v-model的一些说明。这个方法还是很实用和简便的。直接上代码

以下实现一个多选框引入，在子组件选中以后，父组件得到子组件选中的值，多用于较复杂的表单，可以分别封装表单中比较复杂的功能。

父组件

<template>
    <div>
       <ObjectModule v-model="form.moduleChecked" />
    </div>
</template>
   <script> 
       import ObjectModule from './objectModule.vue'; 
       export default { 
       components:{ObjectModule},
               data(){ 
                   return {
                   moduleChecked:[], 
                   } 
               }; 
           },

子组件

<template>
     <el-checkbox-group v-model="checkedCities"> 
          <el-checkbox v-for="city in cities" :label="city" :key="city">
               {{city}}
           </el-checkbox> 
      </el-checkbox-group>
</template>
 <script> 
      const cityOptions = ['上海', '北京', '广州', '深圳']; 
      export default { 
      name:'ObjectModule'
      model:{
           prop:'moduleChecked';
           event: 'change';
      },
      props: { 
          moduleChecked:{ 
              type:Array, default:()=>{ return []; } 
          } 
      },
      watch: { // 选中的值传输给form 
          checkedCities (newVal, oldVal) { 
              this.$emit('change', newVal); } 
      },
          data() { 
              return { 
                  checkAll: false, 
                  checkedCities: ['上海', '北京'], 
                  cities: cityOptions, 
                  isIndeterminate: true 
                  }; 
          }, 
      }
</script>

在自定义组件上使用v-model其实就是简化了父子，子父之间的传参，就不需要在父组件中即命变量又命方法，

<ObjectModule :module-checked="moduleChecked" @fxxxxx="fxxxxx"/>

子组件也不用复杂的去提交

props: { 
          moduleChecked:{ 
              type:Array, default:()=>{ return []; } 
          } 
      },
data() { 
           return { 
               checkAll: false, 
               checkedCities: ['上海', '北京'], 
               cities: cityOptions, 
               isIndeterminate: true 
               }; 
          }, 
methods:{
   sxxxx() {
    this.$emit('moduleChecked',this.checkedCities)
   }
}