這個(gè)屬性通常不太會(huì)注意到，但有的時(shí)候用起來(lái)比較舒服，下面就來(lái)具體說(shuō)說(shuō)這個(gè)屬性。

model

官網(wǎng)解釋?zhuān)涸试S一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event，但是一些輸入類(lèi)型比如單選框和復(fù)選框按鈕可能想使用 value prop 來(lái)達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

簡(jiǎn)單來(lái)講就是將組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定的效果，需要注意的是自定義組件字眼表明其主要的使用場(chǎng)景是在組件內(nèi)部，后面的那一大段是說(shuō)明緣由的。

舉個(gè)例子：

為了獲取input輸入框的值，在Vue.js中我們需要使用v-model指令綁定當(dāng)前標(biāo)簽上，如下，

<input v-model="name" />

其實(shí)v-model在Vue.js中的實(shí)現(xiàn)是語(yǔ)法糖，上面的代碼等價(jià)于<input :value="name" @input="$event.target.value"/>, Vue.js會(huì)監(jiān)聽(tīng)用戶(hù)輸入事件，不同的控件自動(dòng)監(jiān)聽(tīng)對(duì)應(yīng)的事件，比如：select -> value 作為 prop、change 作為事件、text/textarea -> value property 和 input 事件等，通過(guò)v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

當(dāng)然，大多的時(shí)候我們還是需要實(shí)現(xiàn)自己業(yè)務(wù)的組件，這個(gè)時(shí)候如果也想簡(jiǎn)單的實(shí)現(xiàn)雙向綁定，能夠使用v-model，就需要借助model這個(gè)屬性了。

比如說(shuō)你有個(gè)組件如下：

Vue.component('my-comp', {
  model: {
    event: 'update'
  },
  props: 
    value: [String, Number]
  },
  // ...
  methods: {
    func (val) {
        this.$emit('update', val)
    }
  }
})

你在使用的時(shí)候就可以這么用：
<my-comp v-model="fd"></my-comp>
上面的代碼就等價(jià)于

<my-comp
    v-bind:value="fd"
    @update="val => {fd = val}"
  />

如果你不想使用value做props，這個(gè)時(shí)候你可以這么寫(xiě)：

props: {
  selected: [String, number]
}
model: {
  prop: 'selected',
  event: 'update'
}

其他的代碼不用更改，這個(gè)也是有問(wèn)題的，只能使用v-model得到子組件的傳參，父組件內(nèi)綁定的值更新后，子組件沒(méi)更新ui，所以這個(gè)時(shí)候還需要對(duì)子組件的props進(jìn)行監(jiān)聽(tīng)處理。