当前位置：首页 > VUE

vue 组件实现v model

2026-01-21 04:31:06VUE

Vue 组件实现 v-model

在 Vue 中，v-model 是双向绑定的语法糖，通常用于表单元素。自定义组件也可以通过实现 v-model 来支持双向绑定。

基本实现方式

默认情况下，v-model 在组件上使用 value 作为 prop，input 作为事件。可以通过以下方式实现：

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

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

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

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

自定义 prop 和事件

Vue 2.4+ 允许自定义 v-model 的 prop 和事件名称：

vue 组件实现v model

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

<!-- 子组件 CustomInput -->
<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 的默认行为有所改变：

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

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

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

多个 v-model 绑定

Vue 3 支持在单个组件上使用多个 v-model：

vue 组件实现v model

<!-- 父组件 -->
<template>
  <UserForm
    v-model:name="userName"
    v-model:email="userEmail"
  />
</template>

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

<script>
export default {
  props: ['name', 'email'],
  emits: ['update:name', 'update:email']
}
</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 修饰符：

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

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

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

通过以上方法，可以在 Vue 组件中灵活实现 v-model 功能，满足各种双向绑定的需求。