当前位置：首页 > VUE

vue 组件实现v model

2026-02-21 20:00:16VUE

Vue 组件实现 `v-model`

在 Vue 中，v-model 是双向数据绑定的语法糖，默认情况下用于表单元素（如 input、select）。自定义组件也可以通过实现 v-model 来支持双向绑定。

实现原理

v-model 在组件上默认绑定 value prop 和 input 事件。Vue 2 和 Vue 3 的实现方式略有不同：

Vue 2：v-model 是 :value 和 @input 的语法糖。
Vue 3：v-model 是 :modelValue 和 @update:modelValue 的语法糖，同时支持多个 v-model 绑定。

Vue 2 实现方式

基本实现

定义组件
在子组件中，通过 props 接收 value，并在值变化时触发 input 事件。

<!-- 子组件 CustomInput.vue -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  />
</template>

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

父组件使用
父组件直接通过 v-model 绑定数据。

<!-- 父组件 -->
<template>
  <CustomInput v-model="message" />
</template>

<script>
import CustomInput from './CustomInput.vue';

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

自定义 `model` 选项

如果需要修改默认的 prop 和事件名，可以通过 model 选项配置。

<!-- 子组件 CustomInput.vue -->
<template>
  <input 
    :value="text" 
    @input="$emit('update', $event.target.value)"
  />
</template>

<script>
export default {
  model: {
    prop: 'text',
    event: 'update'
  },
  props: ['text']
}
</script>

Vue 3 实现方式

基本实现

Vue 3 中 v-model 默认使用 modelValue 和 update:modelValue。

子组件定义
通过 props 接收 modelValue，并通过 emit 触发更新。

<!-- 子组件 CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

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

父组件使用
直接通过 v-model 绑定。

<!-- 父组件 -->
<template>
  <CustomInput v-model="message" />
</template>

<script>
import CustomInput from './CustomInput.vue';

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

多个 `v-model` 绑定

Vue 3 支持多个 v-model，例如 v-model:firstName 和 v-model:lastName。

vue 组件实现v model

子组件定义
为每个绑定定义对应的 prop 和事件。

<!-- 子组件 UserName.vue -->
<template>
  <input
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['firstName', 'lastName'],
  emits: ['update:firstName', 'update:lastName']
}
</script>

父组件使用
通过 v-model:propName 绑定多个值。

<!-- 父组件 -->
<template>
  <UserName 
    v-model:firstName="first" 
    v-model:lastName="last" 
  />
</template>

<script>
import UserName from './UserName.vue';

export default {
  components: { UserName },
  data() {
    return {
      first: '',
      last: ''
    }
  }
}
</script>