如何理解Vue的.sync修饰符

.sync修饰符

在 Vue 的组件使用中，有时候我们需要对 props 传递的数据实现双向绑定，而单独使用 props 传递数据，只能实现单向的数据传递,同时考虑到 Vue 有以下规则：

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

于是便诞生了.sync 修饰符这个“语法糖”。它会被扩展为一个自动更新父组件属性的 v-on 监听器，即当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 示例代码如下：

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

会被扩展为

<Child :foo="total" v-on:update:foo="total=$event" />

当组件需要更新 foo 的值时，它需要显式地触发一个事件

this.$emit('update:foo', newValue)

最后举个例子更好的理解一下。