Vue 中 :value 和 :value.sync 的区别

在 Vue.js 中，:value 和 :value.sync 都是用于数据绑定的指令，但它们的工作方式有所不同。

:value (单向绑定)

:value 是 v-bind:value 的简写，它实现了单向数据绑定：

<input :value="message">

• 父组件的数据变化会更新子组件的 value

• 子组件内部对 value 的修改不会自动同步回父组件

• 如果需要子组件修改父组件数据，需要通过 $emit 事件

:value.sync (双向绑定)

:value.sync 是 Vue 2.x 中实现双向绑定的语法糖：

<my-component :value.sync="message"></my-component>

 它实际上是以下写法的简写：

<my-component :value="message" @update:value="message = $event"></my-component>

特点：

• 父组件数据变化会更新子组件的 value

• 子组件可以通过 this.$emit('update:value', newValue) 来更新父组件的数据

• 实现了父子组件数据的双向同步

 

区别总结

特性	:value	:value.sync
绑定方向	单向（父→子）	双向（父⇄子）
子组件修改	需要手动 $emit	自动同步
Vue 版本	所有版本支持	Vue 2.x 特有

Vue 3 中的变化

在 Vue 3 中，.sync 修饰符已被移除，取而代之的是使用 v-model 的参数形式：

<my-component v-model:value="message"></my-component>

这提供了更一致的 API 设计，同时保持了双向绑定的功能。