关于vue中.sync的在开发实践中的具体用法说明

在组件开发中，父子之间，经常会遇到.sync修饰符

示例代码：
parent.vue

<template>
  <div>
    <p>parent vue</p>
    <p>{{ doc.title }}</p>
    <Child :title.sync="doc.title" />
  </div>
</template>

<script>
import Child from './Child'
export default {
  data() {
    return {
      doc: {
        title: 'parent title'
      }
    }
  },
  components: {
    Child
  }
}
</script>

<style></style>

child.vue

<template>
  <div>
    <div>child vue</div>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handle() {
      console.log('update click')
      this.$emit('update:title', 'child title')
    }
  }
}
</script>

<style></style>

说明 parent.vue父组件通过:title.sync=""绑定了一个属性值给子组件child.vue

有时候，需要在子组件中处理一些事件，改变父组件中的这个传给子组件的值。

这个时候，只需要显示的在子组件中调用this.$emit('update:title',新值) ,对应的父组件中的 doc.title 就会被更新了。

其实，这个.sync修饰符，完全可以不用， 就通过父组件属性传值给子组件，子组件$emit 一个事件，父组件再监听这个事件，并且把值拿到，更新。 就按照正常操作就行了。

用这个修饰符，相当于少写了一点代码，字面意思上更直观而已。

多用于组件封装。

不使用上面的代码，用传统方式改写如下：

parent.vue

<template>
  <div>
    <p>parent vue</p>
    <p>{{ doc.title }}</p>
    <Child :title="doc.title" @updateFun="onUpdate" />
  </div>
</template>

<script>
import Child from './Child'
export default {
  data() {
    return {
      doc: {
        title: 'parent title'
      }
    }
  },
  components: {
    Child
  },
  methods:{
  	onUpdate(newV) {
  		this.doc.title = newV
  	}
  }
}
</script>

<style></style>

child.vue

<template>
  <div>
    <div>child vue</div>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handle() {
      console.log('update click')
      this.$emit('updateFun', 'child title')
    }
  }
}
</script>

<style></style>

多写几句代码而已。本质还是一样的。

那么，这个东西，在什么地方用呢？

实际开发中，比较常见的就是弹窗显示和关闭。

一般弹窗显示和关闭的状态 是 有父组件用一个变量控制的。但是，在弹窗内部，点击取消按钮 或是右上角的X 图标，都需要关闭弹窗的 。这个时候，就可以用.sync修饰符来简化代码。