Vue 中的 .sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。但是真正的双向绑定会带来维护上的问题，因为当我们子组件修改了实例中的属性，有可能实例中的属性会被实例重新渲染，导致子组件中的属性出现错误。 我们先了解 Vue 中的一些规则：

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

以下展示一个例子：

<template>  // 子组件
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)"> 
    // 子组件需要修改 props 数据，因此这里使用 $emit 进行参数的修改并且传参，在实例中可以使用 $event 来获得 $emit 传的参数
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"] // 子组件引用了实例中的 money  
};
</script>

<style>

</style>

<template> // 实例
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/>
    // 组件使用 $event 来获取到子组件 $emit 传出的参数
    //  上面的代码等价于下面的代码
    // <Child :money.sync="total" />
  </div>
</template>

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

<style>

</style>

例子中，子组件需要修改从实例引入的 props 数据 money，但是不能直接修改，因此子组件使用了 $emit 将 money 处理并且传参。实例中，使用 $event 来获取到子组件的 $emit 参数，实现了双向绑定。而 .sync 作为语法糖，代替了 $event 的使用。

总结：

Vue 中的 .sync 修饰符，它作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。