Vue中.sync修饰符浅析

在说明.sync修饰符作用之前，我们需要先弄清楚尤雨溪制定的Vue的三条规则：

• 组件不能修改props外部数据
• 在组件内this.$emit可以触发事件并传参
• $event可以接收this.$emit传递的参数

那么当我们想要在组件内修改外部数据时，我们可以利用以上三条规则：

组件内部触发事件update:title并传递参数newTitle给$event：

    this.$emit('update:title', newTitle)

组件外部响应事件update:title并接收参数$event：

    <text-document :title="doc.title"  @update:title="doc.title = $event"></text-document>

这样写是否太麻烦了呢？尤雨溪也是这样觉得，于是他创造了一个语法糖.sync，以上写法可以等价于：

    <text-document :title.sync="doc.title"></text-document>

总结：.sync修饰符可以便捷的实现——父组件监听子组件变更props数据的事件（一般命名为：update:myPropName）并根据需要更新一个本地的数据 property。