首先來理解下 v-model

<input v-model="something">

是語法糖

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

與組件一起使用時，簡化為

<custom-input
  :value="something"
  @input="value => { something = value }">
</custom-input>

所以對于一個組件來說v-model，它應該（這些可以在2.2.0+中配置）：
1.接受value道具
2.用新值發(fā)出一個input事件

一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復選框等類型的輸入控件可能會將 value 特性用于不同的目。model 選項可以用來避免這樣的沖突：

<template>
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
</template>
<script>
export default {
    name: 'base-checkbox',
    model:{
        prop: 'checked',
        event: 'change'
    },
    props: {checked: Boolean}
}

現(xiàn)在在這個組件上使用 v-model 的時候：

<base-checkbox v-model="lovingVue"></base-checkbox>

這里的 lovingVue 的值將會傳入這個名為 checked 的 prop。同時當 <base-checkbox> 觸發(fā)一個 change 事件并附帶一個新的值的時候，這個 lovingVue 的屬性將會被更新。

以上是官網的基本的方法，弄懂以上的前提下，我們來繼續(xù)看嵌套組件時怎么再封裝一個v-model，我們新建一個組件special-checkbox里面包含上面的組件base-checkbox，如何將子父組件的v-model打通

<template>
  <base-checkbox v-model="newlovingVue"></base-checkbox>
</template>
<script>
export default {
    name: 'special-checkbox ',
    model:{
        prop:'lovingVue',//要存在于proops
        event:'change'//當組件的值發(fā)生改變時要emit的事件名
    },
    props: ['lovingVue'],
    data:function(){
        return{//要重新定義一個data，賦值為props中的值，因為組件時單數(shù)據流，不能直接修改props
            newlovingVue:this.lovingVue
        } 
    },
    watch:{//這里檢測data中的值，一旦發(fā)生變化就提交事件到父組件
        newlovingVue:function(newVal,oldVal){
            this.$emit('change',newVal)
        }
    }
}
</script>

現(xiàn)在使用這個二次封裝的組件的時候

<special-checkbox v-model="lovingVue"></base-checkbox>