Vue.js .sync 修饰符：实现组件间双向数据绑定

Vue.js 中的 .sync 修饰符是一个语法糖，用于在组件之间进行双向绑定。它可以让父组件和子组件之间共享一个变量，并且当子组件更新这个变量时，父组件也会同步更新。

例如，我们有一个父组件和一个子组件，我们想要在这两个组件之间共享一个变量。我们可以在父组件中使用 .sync 修饰符来传递这个变量给子组件，并且子组件可以使用 $emit() 方法来通知父组件更新这个变量。

父组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component :message.sync='message'></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    <input v-model='localMessage'>
    <button @click='$emit('update:message', localMessage)'>Update</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      localMessage: this.message
    }
  }
}
</script>

在子组件中，我们使用 v-model 指令来绑定一个本地变量 localMessage，并且在更新按钮被点击时，使用 $emit() 方法来触发一个名为 update:message 的事件，并且传递 localMessage 变量作为参数。

在父组件中，我们使用 .sync 修饰符来将 message 变量传递给子组件，并且子组件中的 update:message 事件会自动触发 message 变量的更新。