vue实现vmodel

Vue 实现 v-model 双向绑定

在 Vue 中，v-model 是一个语法糖，用于在表单元素或组件上实现双向数据绑定。以下是不同场景下的实现方法：

在表单元素上使用 v-model

对于原生表单元素（如 input、textarea、select），v-model 会自动绑定 value 属性并监听 input 事件：

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

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

在自定义组件上实现 v-model

在 Vue 2.x 中，自定义组件需要通过 value prop 和 input 事件实现：

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

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

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

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

在 Vue 3.x 中，v-model 的实现有所变化，使用 modelValue prop 和 update:modelValue 事件：

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

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

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

实现多个 v-model 绑定

Vue 3.x 支持为单个组件绑定多个 v-model：

<!-- 父组件 -->
<template>
  <UserForm
    v-model:username="username"
    v-model:password="password"
  />
</template>

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

<script>
export default {
  props: ['username', 'password']
}
</script>

自定义 v-model 修饰符

可以创建自定义修饰符来处理输入值：

<!-- 父组件 -->
<template>
  <CustomInput v-model.capitalize="text"/>
</template>

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

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  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>

使用计算属性实现复杂逻辑

对于需要复杂处理的绑定，可以结合计算属性：

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

<script>
export default {
  props: ['modelValue'],
  computed: {
    computedValue: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value.trim())
      }
    }
  }
}
</script>

以上方法覆盖了 Vue 中实现 v-model 的主要场景，从基础表单绑定到自定义组件的高级用法。根据项目使用的 Vue 版本（2.x 或 3.x）选择对应的实现方式。