当前位置：首页 > VUE

vue-model实现

2026-02-19 01:00:59VUE

在Vue中，v-model是一个用于实现表单输入和应用状态双向绑定的指令。以下是关于v-model的实现方式和原理的详细说明：

基本用法

v-model通常用于表单元素（如input、textarea、select），它会根据控件类型自动选取正确的方法来更新元素的值。

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

实现原理

v-model本质上是一个语法糖，它结合了v-bind和v-on的功能。例如，对于input元素，v-model相当于以下代码：

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

自定义组件中的`v-model`

在自定义组件中，可以通过model选项或Vue 2.6+的v-bind.sync和Vue 3的v-model参数来实现双向绑定。

Vue 2中的实现

在Vue 2中，自定义组件需要定义一个prop和一个event来实现v-model：

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

使用方式：

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

Vue 3中的实现

Vue 3对v-model进行了改进，支持多个v-model绑定和自定义修饰符。

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

使用方式：

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

修饰符

v-model支持一些内置修饰符来改变默认行为：

.lazy：将input事件改为change事件，延迟更新
.number：自动将输入值转为数字类型
.trim：自动去除输入值两端的空格

<input v-model.lazy="message">

高级用法

对于复杂的表单控件，可以结合计算属性和v-model实现更灵活的数据绑定。

data() {
  return {
    firstName: '',
    lastName: ''
  }
},
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`
    },
    set(value) {
      const names = value.split(' ')
      this.firstName = names[0]
      this.lastName = names[1] || ''
    }
  }
}

使用方式：

vue-model实现