.sync修饰符

官网解释：在有些情况下，我们可能需要对一个prop参数进行数据“双向数据绑定”。但是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且再父组件和子组件两侧都没有明显的变更来源。

白话理解：一个组件只能定义一个v-model，如果其他的prop也要实现双向数据绑定的效果，简单的方法就是：给子组件绑定一个自定义事件，父组件监听该事件，然后更新prop。但是这种方法又比较麻烦，.sync就是被设计出来简化这种操作的。

1、原先的自定义事件方法

// info.vue组件定义了一个value属性和valueChange事件
<template>
  <div>
    <input @input="onInput" :value="value"/>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  methods: {
    onInput (e) {
      this.$emit("valueChange", e.target.value);
    }
  }
}
</script>

// 父组件：传递value参数并绑定valueChange事件
<template>
  <div>
    <info :value="myValue" @valueChange="e => myValue = e"></info>
  </div>
</template>

<script>
import info from './info.vue'
export default {
  components: {
    info
  },
  data () {
    return {
      myValue: 12
    }
  }
}
</script>

2、.sync简化后的操作

• 子组件内触发的事件名称以“update：myPropName”命名，也就是将本例中info.vue组件改为update:value;

• update:固定部分，vue约定俗称的，注意必须添加update：的前缀才能正确触发事件；
• value:是要修改的参数名称，是我们手动配置的，与传入的参数名字要对应起来；

• 父组件v-bind:value加上.sync的修饰符，即：v-bind:value.sync，这样父组件就不用再手动绑定@update:value事件了。

// info.vue组件
...
methods: {
	onInput(e) {
		this.$emit("update:value", e.target.value)
	}
}

// index.vue组件
<info :value.sync="myValue"></info>

当然如果一个组件的多个prop都要实现双向绑定，vue提供了一种简便的方法：v-bind.sync = “对象”; 我们给最组件传递的数据都是在data中定义好的。
注意：

带有.sync修饰符的v-bind不能和表达式一起使用，只能传递你想绑定的属性名。