Vue.sync修饰符与this.$emit(‘update:xxx‘, newXXX)

一、.sync修饰符的作用

Vue中的数据是单向数据流：父级 prop 的更新会向下流动到子组件中，但是反过来则不行，即子组件无法直接修改父组件中的数据。
但我们常常会遇到需要在子组件中修改父组件数据的场景。.sync修饰符就可以帮助我们实现这种功能。

.sync 修饰符    this.$emit('update:title', newTitle)

Vue通过prop进行双向数据绑定。子组件数据变化，一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。

Vue2.3版本引入sync，作为一个事件绑定语法糖，当子组件触发事件时，父组件会响应事件并实现数据更新。

二、不使用.sync修饰符的写法

父组件：

<template>
  <div>
      <parent-comp :is-show="detailVisible" @update:isShow="func" /> 
  </div>
</template>

<script>
export default {
  methods: {
    func (val) {
        this.detailVisible = val
    }
  }
}
</script>

子组件： 

onClose () {
     this.$emit('update:isShow', false)
}

注意：this.$emit()中update后的字段要与父组件中保持一致

三、使用.sync修饰符的写法

父组件：

<parent-comp :visible.sync="isShow"></parent-comp>

子组件： 

 props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 子组件触发函数
    handleClose() {
      this.$emit('update:visible', false)
    }
  }