双向绑定

本文介绍Vue3自定义表单组件开发，包括双向绑定（3.4+用defineModel宏，低版本手动props/emit实现）、基础组件（Input/Select不同实现）、复合组件（带验证输入框、日期选择器封装），及组件库设计原则（可配置化、插槽、样式定制等）。

Vue3中v-model实现表单双向绑定，基础通过value与input事件完成；支持多行文本、复选框（多绑定数组）、单选（name分组）、下拉多选（multiple属性）；提供.lazy（延迟更新）、.number（转数字）、.trim（去空格）修饰符优化输入。

Vue3表单输入绑定通过v-model实现“数据-视图”双向同步，v-model是“value绑定+input事件”的语法糖，支持文本输入框、textarea、复选框、单选按钮、下拉框等表单元素。依赖Vue响应式系统（ref/reactive），数据变化自动更新视图，可便捷管理完整表单（如注册表单）的字段同步。

Vue 3 中的计算属性默认是只读的，用于封装依赖数据的计算逻辑并自动响应变化。通过添加 setter，计算属性可以从只读变为可写，允许通过修改计算属性来同步更新依赖数据。计算属性的 getter/setter 还可用于简化自定义组件的 v-model 实现，通过 getter 读取 props，setter 触发更新事件，完成双向绑定。常见错误包括尝试修改 …