「 .sync 修饰符」
- .sync 修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
- 一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit。
- 其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件监听获取子组件传过来的值。
- 如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。
代码示例
假设有以下场景，爸爸给儿子钱， 儿子要花钱：
爸爸和儿子通过属性 ‘money’ 来沟通
// 儿子的Props里有money
<script>
export default {
props: ["money"]
};
</script>
爸爸：
<template>
<div class="app">
// 绑定儿子的money属性
<Child :money="total" />
</div>
</template>
<script>
// 引入儿子组件
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
第一步
儿子触发一个要花钱的事件，然后告诉爸爸花完之后剩多少，这里假设儿子每次花100元
//儿子
<button @click="$emit('update:money', money - 100)">
<span>花钱</span>
</button>
儿子用$emit触发"update:money"事件，并且告诉爸爸，钱花了还剩下 money-100
注意：子组件不能直接修改props的值，只能由父组件修改
第二步
爸爸用v-on:'update:money' 监听 update:money事件，并用$event拿到参数
<Child :money="total" v-on:update:money="total = $event" />
⭐ 由于以上两步操作非常麻烦，于是就有了.sync语法糖。用法是直接在 :money 后加一个.sync修饰符
<Child :money.sync="total" />
// 这一句代码就代替了以下这句代码, 等价于 绑定属性+监听事件+更新属性
<Child :money="total" v-on:update:money="total = $event" />
