Vue 中的 .sync 修饰符作用

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

官方文档中的解释

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

举个生活中的例子

1. 假设有一个父亲（父组件）与一个儿子（子组件）
2. 父亲给儿子1000块钱，但是保管在父亲身上
3. 儿子需要用的时候需要跟父亲说明（this.$emit）才能使用

代码例子

<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>

1. 子组件通过update:money事件名触发响应
2. 子组件使用$emit() 来通知父组件去响应

<template>
  <div class="app">
    我是父组件 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 1000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

1. 父组件将数据通过:money='total'传入子组件
2. 父组件监听update:mondy事件
3. 父组件则通过$event 来接收经过子组件修改后的值。
4. total = $event将触发的事件赋值到data

简化成.sync

<Child :money="total" v-on:update:money="total = $event"/>
由于类似的代码经常使用则可以简化为
<Child :money.sync="total"/>
也可以达到一样的效果

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