当前位置：首页 > VUE

vue组件实现vmodel

2026-03-29 05:23:59VUE

实现 v-model 的双向绑定

在 Vue 中，v-model 是一个语法糖，用于在组件上实现双向数据绑定。默认情况下，v-model 在组件上会利用 value prop 和 input 事件，但可以通过 model 选项进行自定义。

基本实现方式：

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

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

自定义 model 选项：

如果需要修改默认的 prop 和事件名称，可以使用 model 选项：

<template>
  <input
    :checked="checked"
    @change="$emit('change', $event.target.checked)"
  >
</template>

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

使用计算属性优化

对于需要处理输入值的情况，可以使用计算属性来简化代码：

<template>
  <input v-model="internalValue">
</template>

<script>
export default {
  props: ['value'],
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

处理多个 v-model

Vue 2.x 默认只支持单个 v-model，但可以通过自定义 prop 和事件实现多个双向绑定：

<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']
}
</script>

使用时：

<my-component
  :firstName.sync="user.firstName"
  :lastName.sync="user.lastName"
/>

Vue 3 中的变化

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定并移除了 .sync 修饰符：

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

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

多个 v-model 绑定示例：

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

组件内部：

vue组件实现vmodel

<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>