前言

如果觉得本文有帮助记得点赞三连哦十分感谢！

.sync修饰符是事件绑定的语法糖

场景：在父子组件传值时，子组件需要修改这个数据的时候。

原理：利用EventBus，子组件触发事件，父组件响应并实现数据更新，如果子组件直接修改父组件的数据，vue会提示报错。

例子：父亲的钱，儿子用钱需要告诉父亲，然后父亲把身上的钱给到儿子，如果子组件直接修改父组件的值，相当于儿子没通知父亲就直接拿了钱，这样相当于偷，此时vue也会提示报错。

代码样例：

//子组件
<template> 
      <div id="child">
          {{money}} 
// 我要拿200元，此时用$emit去触发更新父数据 //
       <button @click="$emit('update:money', money-200)"> 
        <span>买东西</span> 
       </button> 
    </div> 
</template> 
<script>
export default { 
props: ["money"] 
}; 
</script>
<style> 
#child {
border: 1px solid red;
} 
</style>

//父组件
<template> 
     <div class="app"> 
        父亲资产 {{fmoney}}
        //不简写情况
        <Child :money="fmoney" v-on:update:money="fmoney = $event"/> 
       //语法糖式写法
        <Child :money.sync="fmoney"/>
      </div>
</template>
<script>
import Child from './Child';
   export default {
     components:{
        Child
     };
      data(){
      return {fmoney:5000;}
      },
   }
</script>
<style>
.app{
   border:1px solid red;
}
</style>

注意:子组件使 $emit('update:money',money-200)来通知父组件响应，父组件通过$ event来接收子组件修改的值。

Vue中的.sync修饰符

前言