首先來理解下 v-model
<input v-model="something">
是語法糖
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
與組件一起使用時(shí)油挥，簡化為
<custom-input
:value="something"
@input="value => { something = value }">
</custom-input>
所以對(duì)于一個(gè)組件來說v-model顾患，它應(yīng)該（這些可以在2.2.0+中配置）：
1.接受value道具
2.用新值發(fā)出一個(gè)input事件
一個(gè)組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件，但是像單選框用踩、復(fù)選框等類型的輸入控件可能會(huì)將 value 特性用于不同的目渠退。model 選項(xiàng)可以用來避免這樣的沖突：
<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)在在這個(gè)組件上使用 v-model 的時(shí)候：
<base-checkbox v-model="lovingVue"></base-checkbox>
這里的 lovingVue 的值將會(huì)傳入這個(gè)名為 checked 的 prop。同時(shí)當(dāng) <base-checkbox> 觸發(fā)一個(gè) change 事件并附帶一個(gè)新的值的時(shí)候脐彩，這個(gè) lovingVue 的屬性將會(huì)被更新碎乃。
以上是官網(wǎng)的基本的方法，弄懂以上的前提下惠奸，我們來繼續(xù)看嵌套組件時(shí)怎么再封裝一個(gè)v-model梅誓，我們新建一個(gè)組件
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'//當(dāng)組件的值發(fā)生改變時(shí)要emit的事件名
},
props: ['lovingVue'],
data:function(){
return{//要重新定義一個(gè)data佛南，賦值為props中的值梗掰，因?yàn)榻M件時(shí)單數(shù)據(jù)流，不能直接修改props
newlovingVue:this.lovingVue
}
},
watch:{//這里檢測data中的值嗅回，一旦發(fā)生變化就提交事件到父組件
newlovingVue:function(newVal,oldVal){
this.$emit('change',newVal)
}
}
}
</script>
現(xiàn)在使用這個(gè)二次封裝的組件的時(shí)候
<special-checkbox v-model="lovingVue"></base-checkbox>
