vue 自定義組件 v-model

平時在開發項目寫組件時，父子組件間相互傳值，父組件傳遞過去的值通過props，遵循單向數據流規則，子組件不可修改父組件傳遞過來的值，如需修改需要使用this.$emit('自定義屬性', this.XXX)，類似這種情況可以使用 v-model 更為合適

平時我們使用 v-model 一般用在 input 標簽上

 <input v-model= 'content' ></input>
 
 export default{
       data(){
            return {
                 content: ' '
            }
       }
 }

等價於

 <input v-bind:value='content' v-on:input='content = $event.target.value' ></input>             

用在組件上類似於

Vue.component( 'base-input' , {
       props: ['value'],
       template:` <input v-bind:value = 'value'  v-on:input = "$emit( 'input', $emit.target.value )" ></input> `
})

一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件

所以當我們把 v-model 用在自定義組件上時

父組件：
<Child  v-model = 'flag' ></Child>
export default {
     data(){
        return {
            flag: true
        }
    }
}

子組件：
<button @click = "$emit( 'input',!value )" ></button>
export default {
     props: {
         value: Boolean
     }
}

父組件使用 v-model 綁定在data中定義的屬性 flag 傳遞給子組件（Child），子組件通過 props 接收，名為 value ，通過按鈕觸發對父組件中 flag 進行修改 （ $emit( 'input',!value ) ）

 

通過在model屬性中自定義事件：

如果遇到單選框、復選框等類型的輸入控件可能會將 value attribute 用於不同的目的，model 選項可以用來避免這樣的沖突：

父組件：
 <Child  v-model = ‘flag’></Child>
export default {
        data() {
              return { 
                   flag：true
              }
        }
}

子組件：
<button @click = " $emit（'aliasFlag', !flag）"></button>
export default {
         props：{
                flag: Boolean
          }，
         model：{
                prop: 'flag'，
                event: 'aliasFlag'
         }
}

通過使用 model 里的 event 方法自定義屬性名，prop代表和props里的變量相對應