当前位置：首页 > VUE

vue如何实现vmodel

2026-03-09 08:30:27VUE

Vue 中实现 v-model 的方法

v-model 是 Vue 提供的语法糖，用于在表单元素或组件上实现双向数据绑定。以下是具体实现方式：

在表单元素上使用 v-model

对于原生表单元素（如 input、textarea、select），v-model 会自动绑定 value 属性并监听 input 事件：

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

在自定义组件上实现 v-model

在自定义组件中实现 v-model 需要显式定义 value prop 和 input 事件：

vue如何实现vmodel

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

使用方式与原生元素相同：

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

Vue 2.x 的 model 选项

在 Vue 2.x 中，可以通过 model 选项修改默认的 prop 和事件名称：

vue如何实现vmodel

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    >
  `
})

Vue 3.x 的 v-model 更新

Vue 3.x 对 v-model 进行了改进，支持多个 v-model 绑定：

app.component('custom-component', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

使用带参数的 v-model：

<custom-component v-model:title="pageTitle"></custom-component>

处理修饰符

可以处理 v-model 修饰符，如 .trim、.number：

props: {
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
},
methods: {
  emitValue(e) {
    let value = e.target.value
    if (this.modelModifiers.trim) {
      value = value.trim()
    }
    this.$emit('update:modelValue', value)
  }
}

通过以上方法，可以在 Vue 中灵活实现各种 v-model 绑定场景。