.sync 修饰符

vue.sync修饰符官方文档解释如下：

里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

举个例子看看：

<template>
  <div class="app">
   app.vue 我现在有 {{total}}
   <child :money.sync="total"/>
  </div>
</template>

<script>
import child from "./child.vue";
export default{
  data(){
    return {total: 10000};
  },
  components:{child : child}
}
</script>

顺便补发一个语法糖：

：xx.sync = "total"等价于 :xx="total" v-on : undate :xx= "total=$event"

所以：

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。