vue中的.sync修饰符

.sync是一个语法糖

<child :money = "total" v-on:update:money = "total = $event">
//语法糖
<child :money.sync = "total">

Vue的三个规则

1. 组件不能修改props外部数据
2. $emit可以触发事件并传参
3. $event可以获取$emit的参数

解释

//child组件
<div>
  {{money}}
  <button @click = "$emit('update:money',money-100)">
    <span>花钱</span>
  </button>
</div>
export default {props: ['money']}


//parent组件
<child :money = "total" @update:money = "total = $event"/>
data: {total: 1000}

当父组件向子组件传递数据的时候，在子组件中可以使用props接收，但有时候我们想在子组件中修改接收的值是不被允许的，因为vue是单向数据流。但是又确实想修改，此时可以在子组件中触发"$emit('update:money',money-100)",在父组件中监听@update:money = "total = $event",这样子在子组件中想做的修改money-100就会传递给父组件，父组件对total进行修改并且及时更新UI。vue作者将这种方式简写成了<child :money.sync = "total">