当前位置：首页 > VUE

vue组件实现vmodel

2026-01-16 04:55:26VUE

Vue 组件实现 `v-model`

在 Vue 中，v-model 是双向数据绑定的语法糖，默认情况下绑定 value 属性并监听 input 事件。在自定义组件中实现 v-model 需要正确配置 props 和 emit。

基本实现方式

定义 model 选项
在组件内通过 model 选项指定 prop 和 event：

export default {
  model: {
    prop: 'value', // 绑定的 prop 名
    event: 'input' // 触发的事件名
  },
  props: {
    value: String // 接收父组件传递的值
  },
  methods: {
    updateValue(newValue) {
      this.$emit('input', newValue); // 触发事件更新父组件数据
    }
  }
}

在父组件中使用 v-model

<template>
  <CustomInput v-model="message" />
</template>

Vue 2.x 的替代方案

如果未显式定义 model 选项，默认使用 value 属性和 input 事件：

export default {
  props: ['value'],
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value);
    }
  }
}

Vue 3 的 `v-model` 实现

Vue 3 中 v-model 默认绑定 modelValue 并监听 update:modelValue 事件：

子组件定义

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
}

父组件使用

<template>
  <CustomInput v-model="message" />
</template>

支持多个 `v-model` 绑定（Vue 3）

Vue 3 允许为同一个组件绑定多个 v-model：

<template>
  <UserForm 
    v-model:username="user.name" 
    v-model:age="user.age" 
  />
</template>

子组件需分别定义对应的 props 和 emits：

export default {
  props: ['username', 'age'],
  emits: ['update:username', 'update:age'],
  methods: {
    updateUsername(val) {
      this.$emit('update:username', val);
    },
    updateAge(val) {
      this.$emit('update:age', val);
    }
  }
}

使用计算属性优化

对于表单控件，可以通过计算属性简化逻辑：

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      }
    }
  }
}