当前位置：首页 > VUE

vue如何实现vmodel

2026-01-17 03:28:40VUE

Vue 中实现 `v-model` 的方法

v-model 是 Vue 中用于实现表单元素和数据双向绑定的指令。其本质是语法糖，结合了 value 属性和 input 事件的封装。以下是实现 v-model 的几种方式：

在表单元素上使用 `v-model`

对于原生表单元素（如 input、textarea、select），直接使用 v-model 即可实现双向绑定：

<template>
  <input v-model="message" placeholder="请输入内容">
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在自定义组件中实现 `v-model`

若需在自定义组件中支持 v-model，需通过 model 选项或 Vue 2.6+ 的 v-bind.sync 或 Vue 3 的 v-model 语法实现。

Vue 2 实现方式：

默认情况下，v-model 会绑定 value 属性和监听 input 事件。


<template>
<custom-input v-model="message"></custom-input>
</template>

export default { data() { return { message: '' } } } ``` 2. 自定义组件内部需显式处理 `value` 和 `input`： ```html export default { props: ['value'] } ```

Vue 3 实现方式： Vue 3 中 v-model 默认绑定 modelValue 属性和 update:modelValue 事件。

<template>
  <custom-input v-model="message"></custom-input>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

自定义组件内部：

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['modelValue']
}
</script>

修改 `v-model` 的默认行为

在 Vue 2 中，可通过 model 选项修改绑定的属性和事件：

export default {
  model: {
    prop: 'checked',  // 将默认的 `value` 改为 `checked`
    event: 'change'   // 将默认的 `input` 改为 `change`
  },
  props: ['checked']
}

使用 `.sync` 修饰符（Vue 2）

.sync 是另一种双向绑定的方式，通过 update:propName 事件实现：

<custom-input :title.sync="pageTitle"></custom-input>

组件内部：

this.$emit('update:title', newValue)

Vue 3 的多 `v-model` 绑定

Vue 3 支持多个 v-model 绑定：

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

组件内部需分别处理对应的属性和事件：

<input
  :value="firstName"
  @input="$emit('update:firstName', $event.target.value)"
>
<input
  :value="lastName"
  @input="$emit('update:lastName', $event.target.value)"
>