[JavaScript知识库]VUE中 对.sync修饰符的理解

首先? .sync是一个语法糖🍬。是一个自动更新父组件属性的 v-on 监听器。

举个例子，场景：父亲说给儿子买东西，儿子花了100块，那么父亲存款-100. 这减少的一百块由父亲承担。儿子是没有存款的。

在子组件中，我们使用$emit来告诉父亲我们花费了100块。

<button @click="$emit('spend:money', money-100)">

那么父亲组件中,$event是子组件传过来的参数， 即 money-100 之后的值

<child v-bind:money="total"  v-on:spendMoney="total=$event"  />

接下来使用 .sync，可以被改写为:

<child v-bind:money.sync = "total" />

理解为， sync修饰符可以自动地同步地帮你更新父组件的属性。