v-model自定义修饰符需手动处理，子组件通过$attrs.modelModifiers获取修饰符配置，并在事件回调中对值进行预处理后触发update:modelValue。
v-model 自定义修饰符不是 Vue 自动执行的逻辑，而是你手动读取、判断并处理的流程。关键在于：父组件写 v-model.uppercase，子组件从 $attrs.modelModifiers 拿到 { uppercase: true }，然后你自己决定怎么转换值。
获取并识别修饰符
Vue 3 中，所有绑定在 v-model 上的修饰符（包括内置如 .trim、.number，也包括自定义如 .uppercase、.debounce）都会以对象形式暴露在组件的 $attrs 中，字段名为 modelModifiers。
- 写法：
v-model.uppercase="name"→$attrs.modelModifiers是{ uppercase: true } - 带参数写法：
v-model.debounce="500"→{ debounce: 500 } - 多个修饰符：
v-model.trim.uppercase→{ trim: true, uppercase: true }
在事件中手动应用修饰逻辑
不能只靠监听 input 就直接赋值，必须在触发 update:modelValue 前，对原始输入值做预处理。
- 用
defineEmits(['update:modelValue'])声明更新事件 - 在
@input或@change回调里读取$event.target.value - 按需链式处理：先 trim，再转大写，最后转数字（如果都用了）
- 示例代码片段：
const handleChange = (e) => {
let value = e.target.value;
if ($attrs.modelModifiers?.trim) value = value.trim();
if ($attrs.modelModifiers?.uppercase) value = value.toUpperCase();
if ($attrs.modelModifiers?.number) value = Number(value);
emit('update:modelValue', value);
};
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
支持带参数的自定义修饰符（比如防抖）
修饰符带参数时，它的值不再是 true，而是你传入的数值或对象，比如 v-model.debounce="300" 对应 modelModifiers.debounce === 300。
- 你需要自己实现防抖逻辑，例如用
setTimeout清除上一次定时器 - 不建议在每次 input 都 emit，而是延迟后 emit 一次
- 注意：防抖期间若父组件修改了 modelValue，子组件输入框仍要响应（靠 :value 绑定保证）
搭配 defineModel 简化写法（Vue 3.4+）
如果你用 defineModel()，它返回一个 ref，但修饰符依然不会自动生效——modelModifiers 仍需通过 $attrs 获取。
-
const model = defineModel();只负责绑定和触发 update - 修饰符处理仍得写在事件回调里，例如
@input="handleInput" - 不能省略对
$attrs.modelModifiers的检查和转换
