v-model
v-model是vue的語法糖，是對prop中value屬性 和 input事件的封裝帜慢。官方說明:一個組件上的?v-model?默認會利用名為?value?的 prop 和名為?input?的事件收津，但是像單選框凯旋、復選框等類型的輸入控件可能會將?value?attribute 用于不同的目的秧耗。model?選項可以用來避免這樣的沖突.
子組件實現(xiàn)
<template>
????<div>
????????<input?type="text"?:value="value"?@input="onInput">
????</div>
</template>
<script>
????export?default?{
????????name:?'Kinput',
????????props:{
????????????value:{
????????????????type:String,
????????????????default:""
????????????}
????????},
????????methods:?{
????????????onInput(e)?{
????????????????this.$emit("input",e.target.value);
????????????}
????????},
????}
</script>
父組件 調用
<Kinput?v-model="username"></Kinput>
自定義事件修飾符.sync實現(xiàn)
在有些情況下枉长，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是裆蒸，真正的雙向綁定會帶來維護上的問題熔萧，因為子組件可以變更父組件，且在父組件和子組件都沒有明顯的變更來源光戈。這也是為什么我們推薦以?update:myPropName?的模式觸發(fā)事件取而代之哪痰。
子組件
<template>
????<div>
????????<input?type="text"?:value="value"?@input="onInput">
????</div>
</template>
<script>
????export?default?{
????????name:?'Kinput',
????????props:{
????????????value:{
????????????????type:String,
????????????????default:""
????????????}
????????},
????????methods:?{
????????????onInput(e)?{
????????????????this.$emit("update:value",e.target.value);
????????????}
????????},
????}
</script>
父組件
<KinputSync?:value.sync="username"></KinputSync>
.sync是現(xiàn)實一個彈窗
彈窗==>
父組件調用
