.sync的用法

Vue中的.sync其实是一个帮助用户用来简化代码的语法糖。主要用于子父组件的通信中，代码示例如下：

<!--父组件-->
<template>
	<number-pad :value="record.mount" @update:value="updateNumber"/><!--方法一-->
<template>
<script lang='ts'>
import Vue from "vue";
import {Component} from "vue-property-decorator";
import NumberPad from "@/components/Money/numberPad.vue";
@Component({
	components:{
    	numberPad
    }
})
export default class Money extends Vue{
	mount:number = 0
   //方法一 当点击ok按钮的时候获取数据
	updateNumber(value){
    	mount = this.value;
    }
}
</script>
 <!--子组件-->   
 <template>
    <div class="numberPad">
            <button @click="ok" class="ok">OK</button>
        </div>
    </div>

</template>
 <script lang ='ts'>
 ok(){
         this.$emit("update:value",this.output)
       }
 </script>

若使用.sync语法糖，代码示例如下

<!--父组件-->
<template>
    	<number-pad :value.sync="record.mount"/><!--方法二-->
<template>
<script lang='ts'>
import Vue from "vue";
import {Component} from "vue-property-decorator";
import NumberPad from "@/components/Money/numberPad.vue";
@Component({
	components:{
    	numberPad
    }
})
export default class Money extends Vue{
	mount:number = 0
}
</script>
 <!--子组件-->   
 <template>
    <div class="numberPad">
            <button @click="ok" class="ok">OK</button>
        </div>
    </div>

</template>
 <script lang ='ts'>
 ok(){
         this.$emit("update:value",this.output)
       }
 </script>

可以看出其实.sync主要是代替了@update:xxx="$emit(xxx,xxx)"这句话