对 vue 修饰符 .sync 的理解

其实对这个属性有点陌生，一直都好像没怎么用到这个属性，但是就在今天，因为公司现在重构的这个项目是拿着element-ui的组件库改造的组件，变成公司自己的组件，所以当我在使用某一些组件的时候，好像是在使用 模态框的时候，我看到的这个属性，特别的好奇，

在这里插入图片描述

在使用的时候确实这样使用的

在这里插入图片描述

其实看官网就比较清楚了

在这里插入图片描述

在这里插入图片描述

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

会被扩展为：

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

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

我们可以写一个MyComponent.vue子组件

再编写一个父组件 Synca.vue

在这里插入图片描述

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

作者：littleTank
链接：https://www.jianshu.com/p/6b062af8cf01
来源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。