我们先看下官方文档 vue 修饰符sync
vue 在 2.0 发布之后的实际应用中，我们发现 .sync
还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了
.sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
言简意赅的说就是因为子组件不能直接去修改父组件传过来的值！
所以 .sync 相当于v-on 监听器的缩写
示例代码如下：
<SelectionBox :content.sync = "paymentMethod"></SelectionBox>
会被扩展为：
<SelectionBox @update:content => renewal
:content = "paymentMethod">
</SelectionBox>
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit("update:content",item)
个人总结：
实际上sync可以就是一个“ 语法糖 ”，只是会让语法代码书写变得更加精简和便捷。
vue 修饰符sync的功能是：
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用 .sync ，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用 sync。