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

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

1  <input v-model= 'content' ></input>
2  
3  export default{
4        data(){
5             return {
6                  content: ' '
7
 
             }
8        }
9  }

等價於

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

用在元件上類似於

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

一個元件上的 v-model 預設會利用名為 value 的 prop 和名為 input 的事件

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

 1 父元件：
 2 <Child  v-model = 'flag' ></Child>
 3 export default {
 4      data(){
 5         return {
 6             flag: true
 7         }
 8     }
 9 }
10 
11 子元件：
12 <button @click = "$emit( 'input',!value )"
 
 ></button>
13 export default {
14      props: {
15          value: Boolean
16      }
17 }

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

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

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

 1 父元件：
 2  <Child  v-model = ‘flag’></Child>
 3 export default {
 4         data() {
 5               return { 
 6                    flag：true
 7               }
 8         }
 9 }
10 
11 子元件：
12 <button @click = " $emit（'aliasFlag', !flag）"></button>
13 export default {
14          props：{
15                 flag: Boolean
16           }，
17          model：{
18                 prop: 'flag'，
19                 event: 'aliasFlag'
20          }
21 }

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