vue实现vmodel

Vue 实现 v-model 双向绑定

v-model 是 Vue 提供的语法糖，用于在表单元素或自定义组件上实现双向数据绑定。其本质是 value 属性和 input 事件的组合。

在表单元素中使用 v-model

Vue 内置了对常见表单元素（如 input、textarea、select）的 v-model 支持。

<template>
  <input v-model="message" placeholder="Edit me">
  <p>Message is: {{ message }}</p>
</template>

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

自定义组件实现 v-model

在自定义组件中实现 v-model 需要显式定义 model 选项或使用 v-bind 和 v-on 的语法糖。

方法 1：使用 model 选项

<template>
  <custom-input v-model="searchText"></custom-input>
</template>

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

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

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

方法 2：Vue 2.2+ 的语法糖

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

Vue 3 中的变化

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定和自定义修饰符。

基本用法

<custom-input v-model="searchText"></custom-input>

等效实现

<custom-input
  :modelValue="searchText"
  @update:modelValue="searchText = $event"
></custom-input>

自定义组件实现

<!-- 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 绑定

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

<!-- 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: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName']
}
</script>

修饰符处理

可以自定义修饰符处理逻辑：

<custom-input v-model.capitalize="text"></custom-input>

<!-- CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="emitValue"
  >
</template>

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

通过以上方法可以在 Vue 中灵活实现各种 v-model 双向绑定需求。