当前位置：首页 > VUE

vue中实现双向数据

2026-01-20 22:52:39VUE

Vue 中实现双向数据绑定的方法

使用 `v-model` 指令

v-model 是 Vue 提供的语法糖，用于在表单元素上实现双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素的值。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

在组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

自定义组件的双向绑定

在自定义组件中实现双向绑定，可以通过 model 选项修改默认的 prop 和事件名称。

Vue.component('custom-input', {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'change'
  },
  template: `
    <input
      :value="value"
      @input="$emit('change', $event.target.value)"
    >
  `
})

使用 `.sync` 修饰符

.sync 修饰符是另一种实现双向绑定的方式，它实际上是 v-bind 和 v-on 的语法糖。

<custom-input :value.sync="message"></custom-input>

这等价于：

<custom-input :value="message" @update:value="message = $event"></custom-input>

手动实现双向绑定

可以通过显式地使用 v-bind 和 v-on 来实现双向绑定。

<input :value="message" @input="message = $event.target.value">

在 Composition API 中使用双向绑定

在 Vue 3 的 Composition API 中，可以使用 ref 或 reactive 配合 v-model 实现双向绑定。

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')
    return { message }
  }
}

<input v-model="message">

处理复杂对象

对于嵌套对象，可以使用计算属性的 getter 和 setter 来实现双向绑定。

computed: {
  nestedValue: {
    get() {
      return this.obj.value
    },
    set(value) {
      this.obj.value = value
    }
  }
}

注意事项

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件
- checkbox 和 radio 使用 checked property 和 change 事件
- select 字段将 value 作为 prop 并将 change 作为事件
在自定义组件中使用 v-model 时，默认情况下会使用 value prop 和 input 事件，但可以通过 model 选项修改
.sync 修饰符在 Vue 3 中已被移除，推荐使用 v-model 的参数形式