<input v-model="sth" />
// 等同于
<input :value="sth" @input="sth = $event.target.value" />
其中储玫，
也就是說(shuō)豺憔， v-model="sth" 是 :value="sth" @input="sth = $event.target.value" 的縮寫(xiě)辨绊。
解釋?zhuān)?/strong>
$event 指代當(dāng)前觸發(fā)的事件對(duì)象装诡。
$event.target 指代當(dāng)前觸發(fā)的事件對(duì)象的dom
$event.target.value 就是當(dāng)前dom的value值
在@input方法中逻杖，
value => sth
在:value中：
sth => value
如此，形成了一個(gè)閉環(huán)澳厢，也就是所說(shuō)的數(shù)據(jù)的雙向綁定。
說(shuō)明：
這個(gè)語(yǔ)法糖必須是固定的囚似，什么意思剩拢？
也就是說(shuō)，滿足語(yǔ)法糖規(guī)則：屬性必須為value饶唤，方法名必須為：input徐伐。缺一不可。
自定義組件怎么實(shí)現(xiàn)v-model
<my-component v-model="price"></my-component>
要實(shí)現(xiàn)募狂，自定義組件my-component的v-model办素，該如何實(shí)現(xiàn)。
根據(jù)我們上面的語(yǔ)法糖規(guī)則祸穷，我們可以進(jìn)行拆解：
// 拆解如下
<my-component :value="price" @input="price = $event.target.value"></my-component>
// 根據(jù)這個(gè)我們可以在子組件中性穿，進(jìn)行拼湊value屬性，input方法雷滚。
Vue.component('my-component', {
template: `
<span>
<input
type="text"
:value="value"
@input="$emit('input', $event.target.value)"
>
</span>
`,
props: ['value'],
})
其中：
首先需曾，跟我們拼湊出來(lái)的格式，
- 該組件中肯定是有value屬性的祈远，所以有呆万，props:['value']，這個(gè)沒(méi)問(wèn)題吧车份，然后我們將傳進(jìn)來(lái)的value值谋减，綁定到原生input標(biāo)簽的value屬性上。
雖然都是value扫沼，但不是一個(gè)value出爹，大家不要弄混了。一個(gè)是父組件傳進(jìn)來(lái)的值缎除，一個(gè)是原生input自帶的屬性以政。
- 然后這個(gè)組件中向外拋出了一個(gè)input方法。我們可以通過(guò)伴找，$emit方法盈蛮，向外拋出一個(gè)方法，即input方法
在子組件中的$event.target.value方法技矮，跟我們文章開(kāi)始的解釋一樣抖誉。將原生input中的value屬性的值殊轴，放入到了我們拋出去的input的參數(shù)。
如此袒炉，大家發(fā)現(xiàn)沒(méi)旁理？
我們只是一直在偽造，拼湊承語(yǔ)法糖的樣子我磁，就可以實(shí)現(xiàn)v-model
那么孽文，不是輸入框？也就是沒(méi)有value屬性夺艰，那怎么實(shí)現(xiàn)v-model???
對(duì)于芋哭，復(fù)選框沒(méi)有value屬性，也沒(méi)有input方法郁副，怎么解決减牺？
<input type="checkbox" :checkd="value" @change="handleChecked"/>
解決方案：
一樣的道理，我們?nèi)允切枰礈惓鰧?duì)相應(yīng)的語(yǔ)法糖格式存谎。
// 得到它拔疚，我們就可以實(shí)現(xiàn)v-model
<my-component :value="price" @input="price = $event.target.value"></my-component>
template: `
<span>
<input
type="checkbox"
:checked="value"
@change="$emit('input', $event.target.checked)"
>
</span>
`,
props: ['value'],
})
如上：
將傳進(jìn)來(lái)的props值value，這次我們綁定給checked既荚。
對(duì)于input方法稚失，這次我們?cè)贎change中拋出Input方法，參數(shù)為恰聘，$event.target.checked墩虹。記住是checked屬性哦~
// 得到了一樣的結(jié)果
<my-component v-model="price"></my-component>
