Vue 3中实现处理后的v-model双向绑定

在Vue 3中，当你需要对v-model传入的值进行处理后再展示或使用时，可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。
实现步骤
接收父组件传递的v-model值
创建计算属性，在getter中处理展示值，在setter中处理回传值
在模板中使用计算属性而非直接使用props
代码示例
假设我们有一个输入框组件，需要对输入的数字进行格式化（如添加千分位分隔符），同时在更新时去除这些格式化符号：

<template>
  <div class="custom-input">
    <input 
      type="text"
      :value="formattedValue"
      @input="updateValue($event.target.value)"
      class="form-input px-4 py-2 border rounded-md"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

// 定义props，接收v-model值
const props = defineProps<{
  modelValue: number | string;
}>();

// 定义emit，用于更新v-model
const emit = defineEmits<{
  (e: 'update:modelValue', value: number | string): void;
}>();

// 使用计算属性处理双向绑定
const formattedValue = computed({
  // getter: 处理展示值（如：添加千分位分隔符）
  get() {
    if (typeof props.modelValue === 'number') {
      return props.modelValue.toLocaleString();
    }
    return props.modelValue;
  },
  // setter: 处理用户输入，更新到父组件
  set(value: string) {
    // 移除非数字字符（如逗号）
    const numericValue = value.replace(/[^\d.-]/g, '');
    // 转换为数字并发送到父组件
    emit('update:modelValue', numericValue === '' ? '' : Number(numericValue));
  }
});

// 更新值的方法
const updateValue = (value: string) => {
  formattedValue.value = value;
};
</script>

使用Element Plus的情况
如果你使用Element Plus，可以结合其组件实现：

<template>
  <el-input
    v-model="processedValue"
    class="w-full"
  />
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// 计算属性处理v-model值
const processedValue = computed({
  get() {
    // 对输入值进行处理后展示
    return props.modelValue.toUpperCase();
  },
  set(value: string) {
    // 对要传回父组件的值进行处理
    emit('update:modelValue', value.toLowerCase());
  }
});
</script>

通过这种方式，你可以在保持双向绑定的同时，对传入和传出的值进行自定义处理。
更新时间:2025-03-13 15:53