在Vue 3中自定义表单元素时，哪种实现方式更值得推荐？

两种写法都符合Vue 3的规范，但适用场景有区别，具体分析如下：

计算属性+v-model的写法（你的当前实现） #

• 优势：把props接收值和emit更新值的逻辑封装在计算属性里，模板代码更简洁，逻辑聚合性更强。
• 适配性：你的代码里modelValue支持多种类型（字符串、数组、日期、对象、数字、null），这种写法能直接适配这些类型，不需要额外做类型转换——计算属性的get直接返回props值，set直接emit原始输入值。
• 扩展性：如果后续需要给输入值加格式校验、转换（比如输入数字自动保留两位小数），只需要修改计算属性的get/set逻辑即可，不用改动模板，维护起来更方便。

直接绑定:value和@input的写法 #

• 优势：代码更轻量化，不需要引入computed，适合完全不需要额外逻辑的极简输入组件。
• 局限性：$event.target.value默认是字符串类型，如果你需要支持数字、日期等其他类型，得手动在emit时做类型转换（比如$emit('update:modelValue', Number($event.target.value))），否则会出现类型不匹配的问题。

推荐结论 #

如果你的组件需要支持多种值类型，或者未来有可能扩展输入处理逻辑，优先用计算属性+v-model的写法；如果只是做一个仅处理字符串的基础输入组件，直接绑定:value和@input也完全可行。

内容的提问来源于stack exchange，提问作者Fozilbek Raimberdiyev