v-model.sync

v-model.sync 是 Vue.js 中的一个指令，用于实现双向数据绑定。通过它，可以在父组件和子组件之间实现数据的双向同步。

当在子组件中使用 v-model.sync 指令绑定一个属性时，Vue.js 会自动为该属性创建一个新的 prop，同时将子组件中对该 prop 的更新同步到父组件的属性上。这样就实现了父子组件之间的双向数据绑定。

需要注意的是，v-model.sync 只能用于子组件上，而不能用于自定义组件中的根元素或普通 HTML 元素上。在使用时，需要将 v-model.sync 绑定到一个对象的属性上，并且在子组件中通过 $emit 方法触发一个名为 update:<属性名> 的事件来更新该属性。

例如，在父组件中使用子组件并绑定一个属性：

<template>
  <div>
    <p>父组件的属性值：{{ value }}</p>
    <ChildComponent :value.sync="value"></ChildComponent>
  </div>
</template>

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

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

在子组件中，需要通过 $emit 方法触发 update:value 事件来更新父组件的 value 属性：

<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('update:value', newValue);
    }
  }
}
</script>

这样，当在子组件中输入框中输入内容时，父组件的 value 属性会自动更新，并且当父组件的 value 属性更新时，子组件中的输入框也会同步更新。