Vue 中 v-model 指令和 .sync 修饰符的比较

2023-11-18 10:43:22

v-model 指令

v-model 指令是 Vue 中用于实现数据绑定的核心指令之一。它可以将表单元素的输入值与 Vue 组件的数据进行双向绑定，这意味着当表单元素的值发生改变时，Vue 组件的数据也会随之改变，反之亦然。

<input v-model="message">

在上例中，当用户在输入框中输入文字时，message 的值也会随之改变。同样地，当 message 的值发生改变时，输入框中的文字也会随之改变。

v-model 指令还可以用于在 Vue 组件之间建立双向数据绑定。在这种情况下，需要在子组件中使用 model 选项来指定要绑定的数据。

// 子组件
export default {
  model: {
    prop: 'message',
    event: 'change'
  }
}

<!-- 父组件 -->
<child-component v-model="message"></child-component>

在上例中，当子组件中 message 的值发生改变时，父组件中 message 的值也会随之改变。同样地，当父组件中 message 的值发生改变时，子组件中 message 的值也会随之改变。

.sync 修饰符

.sync 修饰符也可以用于实现数据绑定，但它与 v-model 指令不同的是，它只能在两个 Vue 组件之间建立单向或双向数据绑定。

<!-- 子组件 -->
<input v-bind:value="message" @input="$emit('update:message', $event.target.value)">

<!-- 父组件 -->
<child-component v-model.sync="message"></child-component>

在上例中，当子组件中 message 的值发生改变时，父组件中 message 的值也会随之改变，但反之则不行。

<!-- 子组件 -->
<input v-model="message">

<!-- 父组件 -->
<child-component :message.sync="message"></child-component>

在上例中，当子组件或父组件中 message 的值发生改变时，另一个组件中 message 的值也会随之改变。

特性	v-model 指令	.sync 修饰符
数据绑定方向	双向	单向/双向
使用场景	表单元素与 Vue 组件之间的数据绑定，Vue 组件之间的数据绑定	两个 Vue 组件之间的数据绑定
语法	`v-model="expression"`	`v-bind:value="expression" @input="$emit('update:expression', $event.target.value)"` 或 `:expression.sync="expression"`