Vue修饰符之.sync用法

理解.sync用法之前，先简单看一下父子组件之间的通信

1.vue父子组件通信

子组件通过props接收父组件传递过来的数据，子组件改变数据的时候我们又要告知父组件（通过$emit触发一个事件，然后父组件监听捕获）

父组件：

<template>
    <div class="parent">
      <!-- 通过v-bind将父组件上的数据parentData传递给子组件 -->
      <!-- 父组件通过@change监听子组件的事件并处理 ，事件名称(change)要与子组件通过$emit触发的名称相同-->
      <Child :childData='parentData' @change='handleChange'></Child>
    </div>
</template>
<script>
  export default {
    name: "parent",
    components: { Child },
    data() {
      return {
        parentData: 1
      }
    },
    methods: {
      handleChange() {
        console.log('父组件监听到了子组件触发的事件并处理了！！');
      }
    }
  }
</script>

子组件：

<template>
    <div class="child">
      <h1>{{childData}}</h1>
      <button @click='changeChild'></button>
    </div>
</template>
<script>
  export default {
    name: "child",
    // 子组件通过props接收父组件传递的parentData
    props: {
      childData: {
        type: Number,
        default: 1
      }
    },
    methods: {
      changeChild() {
        // 通过$emit提交change事件，告知父组件子组件的行为
        this.$emit('change')
      }
    }
  }
</script>

2.看了父子组件之间的通信，我们就可以很好地理解修饰符.sync的用法了,.sync修饰符相当于子组件向父组件传值的语法糖。

<template>
    <div class="parent">
      <!--.sync语法糖，对比上方的写法会简单很多 -->
      <Child :childData.sync='parentData'></Child>
    </div>
</template>
<script>
  export default {
    name: "parent",
    components: { Child },
    data() {
      return {
        parentData: 1
      }
    },
  }
</script>

<template>
    <div class="child">
      <h1>{{childData}}</h1>
      <button></button>
    </div>
</template>
<script>
  export default {
    name: "child",
    // 子组件通过props接收父组件传递的parentData
    props: {
      childData: {
        type: Number,
        default: 1
      }
    },
    mounted(){
        //相当于触发这个方法，'update:childData'
        //update+修改的字段名称
        this.$emit('update:childData')
    }
  }
</script>