.sync 修饰符
考虑一个常见的情景：
子组件接受来自父组件的外部数据，而Vue 规定组件不可修改其外部数据 props，那么如何才能修改呢？
【例】
子组件有外部数据cData，将父组件的pData传给cData，预期在点击子组件的按钮时，使cData的值减少100
子组件：
<template>
{{cData}}
<button @click="???">修改cData</button> // ???处该如何填
</template>
<script>
export default {
props: ["cData"]
}
</script>
父组件：
<template>
<div>
{{pData}}
<Child :cData="pData" />
</div>
</template>
<script>
import Child from './Child.vue'
export default {
data(){
return {
pData: 1000
}
},
components: {Child}
}
</script>
由于不可修改子组件的cData，只能想办法让父组件修改pData。
第一步
我们让子组件在点击按钮时触发一个事件'update:cData'，这可以用vm.$emit方法实现：
<button @click="$emit('update:cData', cData - 100)">修改cData</button>
//$emit 方法第一个参数为事件名，第二个参数为要传出的值，此处将传出值设为 cData - 100
此时，vm.$event便记录了cData - 100的值（即cData的预期修改值）
第二步
在父组件监听此事件，将pData改为vm.$event即可：
<Child :cData="pData" v-on:update:cData="pData = $event" />
使用 .sync 修饰符进行简化
由于这样的写法很麻烦，而类似的情景又很常见，所以 Vue 提供了.sync修饰符简化写法。
在给cData传值时加上.sync即可（前提是要将$emit触发的事件名取为'update:cData'）：
<Child :cData.sync="pData" />
