其实对这个属性有点陌生，一直都好像没怎么用到这个属性，但是就在今天，因为公司现在重构的这个项目是拿着element-ui的组件库改造的组件，变成公司自己的组件，所以当我在使用某一些组件的时候，好像是在使用 模态框的时候，我看到的这个属性，特别的好奇，
在这里插入图片描述
在使用的时候确实这样使用的
在这里插入图片描述
其实看官网就比较清楚了
在这里插入图片描述
在这里插入图片描述
在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
<comp :foo.sync="bar"></comp>
会被扩展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)
我们可以写一个MyComponent.vue子组件
<template>
<div v-if="show">
<p>默认初始值是{{show}}，所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>
</template>
<script>
export default {
name: "myComponent",
props: ['show'],
methods: {
closeDiv() {
this.$emit("update:show", false)
}
}
}
</script>
再编写一个父组件 Synca.vue
<template>
<div class="details">
<myComponent :show.sync="valueChild" style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import myComponent from "../components/MyComponent"
export default {
components: {
myComponent
},
data() {
return {
valueChild: true
}
},
methods: {
changeValue() {
this.valueChild = !this.valueChild
}
}
}
</script>
在这里插入图片描述
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。
作者：littleTank
链接：https://www.jianshu.com/p/6b062af8cf01
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
