背景

同一个输入组件在不同页面表现不同，常见原因是 props、事件和默认插槽之间没有稳定约定。组件可复用首先依赖可预测性。

核心判断

  1. props 表达输入，事件表达意图，组件不要暗中修改父级对象。
  2. v-model 对应 modelValue 与 update:modelValue，disabled 时阻止交互。
  3. 插槽提供必要上下文，避免暴露内部状态对象。

最小示例

下面保留核心逻辑；业务类型、调用入口和环境配置按项目补齐。

const props = defineProps<{ modelValue: string; disabled?: boolean }>();
const emit = defineEmits<{ "update:modelValue": [value: string] }>();

边界与误区

示例的具名元组 emits 写法要求项目编译器支持。类型签名不能替代事件时机、默认值和键盘行为的文档。

验证方式

以受控组件方式测试输入、清空、禁用和父级更新，确认一次操作只触发约定的事件；再验证键盘与屏幕阅读器可访问性。

小结

输入、输出和扩展点显式化，组件内部状态不要通过隐式副作用泄漏。