在 Vue 中，.sync 是一个用于实现双向数据绑定的特殊修饰符。它允许父组件通过一种简洁的方式向子组件传递一个 prop，并在子组件中修改这个 prop 的值，然后将修改后的值反馈回父组件，实现双向数据绑定。
使用 .sync 修饰符的基本语法是：:propName.sync="dataProperty"，其中 propName 是要传递给子组件的 prop 名称，dataProperty 是父组件中的一个数据属性，用于存储与子组件 prop 关联的值。注意，.sync 修饰符不能直接用于子组件的 prop 上，而是应该用于父组件的模板中。
当使用 .sync 修饰符时，Vue 会自动生成一个名为 update:propName 的事件，并在子组件中触发该事件来更新父组件的数据。在子组件中，通过调用 $emit 方法并传递 update:propName 事件，将新的值传递回父组件。父组件会捕获该事件并将新的值保存在与 dataProperty 相关联的数据属性中。
这里有一个简单的例子来说明 .sync 的使用：
<!-- ParentComponent.vue -->
<template>
<div>
<!-- 使用 .sync 修饰符向子组件传递 message prop，并实现双向绑定 -->
<child-component :message.sync="messageFromParent"></child-component>
<p>Message from parent: {{ messageFromParent }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
'child-component': ChildComponent,
},
data() {
return {
messageFromParent: 'Hello from parent',
};
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<!-- 使用 v-model 修饰符接收 message prop，并在输入框中显示和修改值 -->
<input v-model="localMessage" @input="updateMessage" />
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {
localMessage: this.message,
};
},
methods: {
updateMessage() {
// 触发 update:message 事件将新值传递回父组件
this.$emit('update:message', this.localMessage);
},
},
};
</script>
在上述示例中，父组件 ParentComponent.vue 使用 .sync 修饰符将 messageFromParent 数据属性传递给子组件 ChildComponent.vue 的 message prop，并建立双向绑定。子组件通过 v-model 修饰符接收 message prop 并在输入框中显示和修改值。当输入框的值发生变化时，子组件触发 update:message 事件将新的值传递回父组件。父组件捕获该事件并更新 messageFromParent 的值，从而实现了双向数据绑定。
使用 .sync 修饰符可以简化双向数据绑定的语法，同时让父子组件之间的通信更加直观和高效。但请注意，它仅适用于单个 prop 的情况。如果需要传递多个 prop 或进行更复杂的通信，可以考虑使用自定义事件和回调函数等其他方法。