当前位置：首页 > VUE

vue v-model实现

2026-01-20 03:33:09VUE

Vue v-model 实现原理

Vue 的 v-model 是一个语法糖，用于在表单元素或自定义组件上实现双向数据绑定。其核心原理是通过结合 value 属性和 input 事件（或其他类似事件）来实现数据的同步。

在表单元素上的实现

对于原生表单元素（如 input、textarea、select），v-model 会根据元素类型自动绑定对应的属性和事件：

<input v-model="message">

等价于：

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

:value 将数据 message 绑定到输入框的 value 属性。
@input 监听输入事件，将输入框的值赋给 message。

在自定义组件上的实现

在自定义组件中，v-model 默认绑定 value 属性和 input 事件。可以通过 model 选项修改默认行为。

默认实现：

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

等价于：

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

自定义组件的实现：

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

修改默认的 prop 和事件

从 Vue 2.2.0 开始，可以通过 model 选项修改 v-model 绑定的 prop 和事件：

Vue.component('custom-component', {
  model: {
    prop: 'checked',  // 修改默认的 prop 为 checked
    event: 'change'   // 修改默认的事件为 change
  },
  props: ['checked'],
  template: `
    <input 
      type="checkbox" 
      :checked="checked" 
      @change="$emit('change', $event.target.checked)"
    >
  `
})

Vue 3 中的变化

在 Vue 3 中，v-model 的默认行为有所调整：

默认绑定 modelValue prop 和 update:modelValue 事件。
支持多个 v-model 绑定（如 v-model:title）。

自定义组件示例：

vue v-model实现

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