在平时会遇到一些input，select，checkbox，radio等组件，需要使输入到组件的值与父组件所对应值双向绑定，而这一般通过v-modul可以实现

在这里我已经注册好全局组件了，可以直接使用.因为名字不一样，我就懒得每个都改一次了，都用Select

1.input type=“text”这种类别的

// 父组件
<template>
  	<div>
		<Select v-model="hi"></Select>
		<p>{{ hi }}</p>
	</div>
</template>

export default {
  data() {
    return {
      hi: ''
      }
   }
}

// 子组件
<template>
 	 <div>
    	<input type="text" :value="value" v-on:input="$emit('input', $event.target.value)">
 	</div>
</template>

export default {
  props：{
  	value：String
  }
}

2.select

// 父组件
<template>
  	<div>
		<Select v-model="hi"></Select>
		<p>{{ hi }}</p>
	</div>
</template>

export default {
  data() {
    return {
      hi: ''
      }
   }
}
// 子组件
<template>
 	 <div>
    	<select :value="value" @change="$emit('change', $event.target.value)">
      		<option value="1" label="1"></option>
      		<option value="2" label="2"></option>
      		<option value="3" label="3"></option>
      		<option value="4" label="4"></option>
    	</select>
 	</div>
</template>

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props：{
  	value：String
  }
}

3.checkbox

// 父组件
<template>
  	<div>
		<Select v-model="hi" :date='arr'></Select>
		<p>{{ hi }}</p>
	</div>
</template>

export default {
  data() {
    return {
      hi: [],
      arr: ['1','2']
      }
   }
}
// 子组件
// 注：这是我是显示的值，就是父组件arr中的值，如果是要换成true or false
//	算了，估计用到的也少，没必要多讲。 
<template>
 	 <div>
    	<label v-for="(item, index) in date" :key="index">
      		<input type="checkbox" @change="valueChange" :value="item"/>
    	</label>
 	</div>
</template>

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
      value: Array,
      date: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        values: []
      }
    },
    methods: {
      valueChange(event){
        let {checked,value} = event.target;
        if(checked&&!this.values.includes(value)){
        //如果当前选中并且values中没有对应的值。将此值添加到values中
          this.values.push(value)
        }else if (!checked&&this.values.includes(value)){
        //如果当前取消选中并且values中存在对应的值。将此值从values中移除
          let index = this.values.findIndex(hobby=>hobby===value)
          this.values.splice(index,1)
        }
        this.$emit('change',this.values)
      }
    }
}

4.radio

这个与上面的checkbox类似，就懒得弄了，自己加油！

结语

这只是简单的封装了下，可以用但并不高级；
一般后两类的使用都类似下：
	<Ckeckbox-group>
		<Option value="" name=""></Option>
	</Ckeckbox-group>
以后抽空再补上，现在各位看官先将就将就