功能简介
从 2.3.0 起重新引入了 .sync 修饰符，但是它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
了解.stnc语法糖的使用
<Child :money.sync="total" />
等价于
<Child :money="total" v-on:update:money='total=$event'/>
所以，要理解.sync的作用，就从下面的代码入手吧。
代码示范理解
在App.vue中
<template>
<div class="app">
总账，我现在有{{total}}元
<hr>
<Child :money.sync="total" />
</div>
</template>
<!-- <Child :money="total" v-on:update:money='total=$event'/> -->
<script>
import Child from './Child.vue'
export default {
data(){
return {total : 10000}
},
components:{
Child : Child
},
}
</script>
<style>
.app{
border:3px solid red;
padding : 10px
}
</style>
在Child.vue中
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money',money-100)"><span>花钱</span></button>
</div>
</template>
<script>
export default {
props :['money']
}
</script>
<style>
.child{
border : 3px solid green
}
</style>
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
这三段代码的效果如下：
接下来理解它的思路。 我在App.vue文件中声明并导出一个变量total，导出给Child.vue文件，Child.vue接受这个变量，并需要更改这个变量，于是App.vue来改变这个变量。
做法就是，
- 导出传入total变量
先在App.vue中引入Child.vue组件，然后写入template中，Child.vue传入一个变量，传出的变量名为money，传入的变量名为total。
<Child :money="total" />然后在Child.vue中接受这个变量props :['money'] - Child.vue接受这个变量，并需要更改这个变量
money作为外部变量props引入后，就可以使用了，但是vue不支持更改外部变量，只能让App.vue去更改。于是，在需要更改的时候，触发一个事件，触发事件，在vue中用
$emit实现，<button @click="$emit('update:money',money-100)">事件名是update:money，需要的变更是money-100。 - App.vue来改变这个变量 Child.vue触发了update:money事件，App.vue就需要监听这个事件，并得到Child.vue需要进行的变更。 `
，其中 v-on是来监听事件的，update:money是被监听的事件名，子文件中进行的变更，需要通过eventbus来得到，也就是$event`。
这就是整个代码的逻辑，和.sync的使用过程。 vue中通过语法糖简写了App.vue中的代码，也就是
<Child :money.sync="total" />
等价于
<Child :money="total" v-on:update:money='total=$event'/>
