对 vue 修饰符 .sync 的理解

其实对这个属性有点陌生，一直都好像没怎么用到这个属性，但是就在今天，因为公司现在重构的这个项目是拿着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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。