兩種語法糖，搞定Vue組件Prop的雙向綁定

不管是vue仍是react，在父子組件通信的時候，子組件都禁止直接修改父級傳過來的prop，父組件總須要在子組件身上監聽一個事件，而後由子組件去觸發它，好讓父組件來接收到payload去改變state。能不能直接在子組件裏修改prop，而後父組件中的state也隨之改變呢？ 其實本質上是不行的，但幸運的是，vue爲咱們準備了兩個語法糖作到了這一點，讓咱們減小了一點寫大量模板代碼的痛苦。它們就是自定義組件上的v-model指令以及.sync修飾符。

假如咱們有以下的一個父組件，想爲子組件傳遞一個名爲val的prop，而且期待有雙向綁定的效果：

<template>
  <child-component :val="val" />
</template>
<script>
export default {
  data() {
    return {
      val: 100
    }
  }
}
</script>
而子組件負責接收val，而且每click一次button，則讓val+2：
<template>
  <div>
    <div>{{val}}</div>
    <button @click="handleClick">click</button>
  </div>
</template>

經過v-model

一個組件上的 v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件，可是像單選框、複選框等類型的輸入控件可能會將 value attribute 用於不一樣的目的。利用model 選項能夠用來避免這樣的衝突。換句話說，你能夠將v-model的prop以任意名稱來接收，不必定要使用value， 事件名稱也能夠是任意的，不必定非要寫成input。以下例：

父組件經過v-model傳遞val值：

<template>
  <child-component v-model="val" />
</template>
而子組件內經過model選項去綁定這個prop：
export default {
  model: {
    prop: 'anyKey',  // 不必定非要是value
    event: 'anyEventName'  // 不必定非要是input
  },
  props: {
    anyKey: {
      type: Number
    }
  },
  methods: {
    handleClick() {
      this.$emit('anyEventName', this.anyKey+2)
    }
  }
}

父組件裏的 val 的值將會傳入這個名爲 anyKey 的 prop。同時當子組件<child-component> 觸發一個 anyEventName 事件並附帶一個新的值的時候，父組件val 的 state 將會被更新。

經過.sync修飾符

父組件經過.sync修飾符傳遞val值：

<template>
  <child-component :val.sync="val" />
</template>

子組件內接收更簡單，由於vue內部幫咱們綁定了update:myPropName這樣一個事件：

export default {
  props: {
    val: {
      type: Number
    }
  },
  methods: {
    handleClick() {
      this.$emit('update:val', this.val+2)
    }
  }
}

.sync修飾符寫起來更簡便一些，雙向綁定爽歪歪。不過有一點要注意，像v-bind.sync=」{ title: doc.title }」這種綁定字面量對象，修飾符是沒法正常工做的。