vue使用.sync和update实现父组件与子组件数据绑定的案例

在 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 或进行更复杂的通信，可以考虑使用自定义事件和回调函数等其他方法。