vue3 .sync修饰符的应用

`.sync` 修饰符是 Vue 3 中用于实现双向绑定的一种方式。它可以将一个组件的属性绑定到一个父组件的属性，并在子组件中对父组件属性进行修改时，自动更新父组件属性的值。

举个例子，假设有一个父组件 `Parent` 和一个子组件 `Child`，它们的代码分别如下：

<!-- Parent.vue -->
<template>
  <div>
    <Child :count.sync="count" />
    <p>count: {{ count }}</p>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      count: 0
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true,
      default: 0
    }
  },
  methods: {
    increment() {
      this.$emit('update:count', this.count + 1)
    }
  }
}
</script>

在 `Parent` 组件中，我们将子组件 `Child` 的 `count` 属性绑定到了父组件的 `count` 属性，并使用 `.sync` 修饰符实现了双向绑定。在 `Child` 组件中，我们通过 `$emit` 方法触发了一个名为 `update:count` 的事件，并将修改后的 `count` 属性值传递给了父组件。

这样，当我们在子组件中点击按钮进行加法操作时，父组件的 `count` 属性值也会随之更新，从而实现了双向绑定的效果。