v-model這個指令我們常用在資料的綁定上，希望我們所綁定的資料可以做到雙向(事件與屬性)綁定，這部分Vue允許我們客製化它，v-model默認會利用名為value的prop和input的事件，我們可以透過model的選項來自定義v-model。

Vue.component('base-input', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String
  },
  template: `
    <input
      type="text"
      v-bind:value="value"
      v-on:change="$emit('change', $event.target.value)"
    >
  `
})

model裡的prop與event可以用於不同目的，定義完後，我們就可以使用該元件

<base-input v-model="someWords"></base-input>

---我是分隔線-----------------------------------------------------

昨天有教大家父子元件的雙向綁定，今天再加碼傳授一個透過.sync修飾符來完成雙向綁定。
一般我們都是子元件在JS上賦予新值，透過$emit發出事件

this.$emit('update:name', newName)

然後父元件接收到數據更新

<child-component
  v-bind:name="doc.name"
  v-on:update:name="doc.name = $event"
></child-component>

我們更可以將它縮寫成

<child-component
  v-bind:name.sync="doc.name">
</child-component>

只是須注意到的事情，具有修飾詞.sync不能綁定表示式或文字型的物件(難以形容，看以下範例)，你應該是綁定在屬性名上。

v-bind:name.sync="'Name:' + doc.name "
v-bind.sync="{ name: doc.name }"

以上都是不能使用之情況

---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang