.sync 修饰符

在 Vue.js 中，.sync 修饰符是一种用于双向绑定子组件和父组件之间的属性的语法糖。它简化了父组件更新子组件的属性以及子组件通知父组件属性变化的过程。

.sync 修饰符的作用

通常，在父组件中向子组件传递属性时，子组件无法直接修改父组件的属性。为了实现双向绑定，通常需要：

1. 父组件通过 prop 向子组件传递数据。
2. 子组件在需要更新父组件数据时，通过 $emit 事件通知父组件。
3. 父组件监听该事件并更新自己的数据，从而间接影响传递给子组件的 prop。

.sync 修饰符简化了这个过程。

使用 .sync 修饰符

假设有一个子组件 ChildComponent，它接收一个 value 属性，并且在内部会修改这个属性。
父组件：

<template>
  <div>
    <child-component :value.sync="parentValue"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: 'Initial Value'
    };
  }
};
</script>

子组件：
在子组件中，通过 $emit(‘update:value’, newValue) 来通知父组件更新 value 属性。

<template>
  <div>
    <input v-model="internalValue" @input="updateValue">
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    }
  },
  methods: {
    updateValue() {
      this.$emit('update:value', this.internalValue);
    }
  }
};
</script>

父组件：使用 .sync 修饰符绑定 value 属性。v-bind 和 v-on 会自动生成相应的事件监听和属性绑定。
子组件：在子组件内部，当 value 属性需要更新时，通过 $emit(‘update:value’, newValue) 发出事件。

如果不使用.sync 修饰符，则在父组件中

 <child-component :value="parentValue" @updateValue="handleUpdateValue"></child-component>

 methods: {
    handleUpdateValue(newValue) {
      this.parentValue = newValue;
    }
  }

子组件中

updateValue() {
  this.$emit('updateValue', this.internalValue);
}

多了一步手动写数据更新的监听函数。