sync不生效 vue_浅析Vue 中的 .sync

应用场景：

我们现在需要写两个组件，子组件通过 props 属性接收父组件传递过来的值，儿子发布事件，父亲订阅事件，但是子组件并不能直接对 props 属性做修改，而是需要触发一个事件，让父组件进行修改。之所以需要这样，理论上的原因是，该 props 属性即存在父组件又存在子组件中，如果子组件擅自修改 props 中的属性，父组件并不能监听到该数据的修改，从而会出现一些问题。

父组件

子组件

子组件中

复制代码

发布事件，意思是点下“花钱”按钮，对应的值要变为money-100，此时就需要修改props中的money，而父组件为了获取变化后的数据，需要监听子组件

//监听money的变化复制代码

其中$event是vue内置的，作用是储存money-100的值。

这样父子组件就实现了双向绑定。而.sync知识一个语法糖：

//监听money的变化

上面这句可以写成如下

复制代码

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