两种语法糖，搞定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 }”这种绑定字面量对象，修饰符是没法正常工做的。