实现步骤
接收父组件传递的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>
通过这种方式，你可以在保持双向绑定的同时，对传入和传出的值进行自定义处理。
