前端，VUE sync修饰符

sync修饰符解释起来比较麻烦，我们可以举个例子

爸爸给儿子钱，儿子要花钱怎么办

答：儿子打电话（触发事件）向爸爸要钱

---

首先我们要知道Vue的规则：

Vue规则：组件不能修改props外部数据

Vue规则：this.$emit可以触发事件，并传参

Vue规则：$event可以获取$emit的参数

<button @click="money -= 100"> <span>花钱</span> </button> // 但这样其实是会报错的，会警告不能直接修改外部的 props

所以问题来了，到底怎么才能花钱？

// App.vue <button @click="$emit('update:money', money-100)"> <span>花钱</span> </button> // Child.vue <Child :money="total" v-on:update:money="total = $event"/>

v-on:update:money="total = $event"这段代码就是用来获取money更新后的值，但是好长啊，Vue作者为我们提供了一个修饰符sync！帮助我们简化

最终它可以变成这样：

<Child :money.sync="total"/>

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

代码 <Child :money.sync="total"/> 会被扩展为

代码 <Child :money="total" v-on:update:money="total = $event"/>