组件设计

背景 同一个输入组件在不同页面表现不同，常见原因是 props、事件和默认插槽之间没有稳定约定。组件可复用首先依赖可预测性。 核心判断 props 表达输入，事件表达意图，组件不要暗中修改父级对象。 v-model 对应 modelValue 与 update:modelValue，disabled 时阻止交互。 插槽提供必要上下文，避免暴露内部状态对象。 最小示例 下面保留核心逻辑；业务类型、调用入口和环境配置按项目补齐。 const props = defineProps<{ modelValue: string; disabled?: boolean }>(); const emit = defineEmits<{ "update:modelValue": [value: string] }>(); 边界与误区 示例的具名元组 emits 写法要求项目编译器支持。类型签名不能替代事件时机、默认值和键盘行为的文档。 验证方式 以受控组件方式测试输入、清空、禁用和父级更新，确认一次操作只触发约定的事件；再验证键盘与屏幕阅读器可访问性。 小结 输入、输出和扩展点显式化，组件内部状态不要通过隐式副作用泄漏。