自定义表单组件需显式接收并透传disabled prop至内部原生元素，禁用时忽略用户输入事件但保留v-model响应式更新，配合样式反馈与provide/inject实现父级批量禁用及局部覆盖。

禁用状态需透传到内部原生元素

自定义表单组件（如 <my-input>）本身不自带 disabled 行为，必须显式接收 disabled prop，并把它绑定到内部的 <input>、<textarea> 或 <select> 上。否则即使父组件传了 :disabled="true"，子组件也不会响应。

推荐写法：

• 在组件 props 中声明 disabled: { type: Boolean, default: false }
• 在模板中将 :disabled 直接绑定到原生控件：<input :disabled="disabled" ...>
• 避免用 v-if 移除控件来模拟禁用——这会中断 v-model 双向绑定，且不符合语义

同步控制 v-model 的可写性

仅绑定 disabled 属性还不够。当组件被禁用时，用户不应能通过输入、粘贴、拖拽等方式修改值，但 v-model 仍需保持响应式更新能力（例如父组件主动赋值时要能生效）。

关键点：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 禁用状态下，应忽略所有用户触发的输入事件（@input、@change、@paste 等），不调用 emit('update:modelValue', ...)
• 但保留 modelValue prop 的响应式监听，确保父组件仍可强制更新值
• 可在 onMounted 或 watch 中检查 disabled 变化，动态添加/移除事件监听器

样式与交互反馈需一致

禁用态不只是功能锁定，还要有明确视觉提示。建议：

• 给组件根元素添加 :class="{ 'is-disabled': disabled }"，配合 CSS 控制文字颜色、背景、光标等
• 禁用时统一设置 cursor: not-allowed，避免用户误操作
• 若组件内含图标、清除按钮等交互元素，也需同步禁用（如 :disabled="disabled" 或 v-if="!disabled"）
• 可结合 CSS 变量实现主题适配，例如 color: var(--disabled-text-color, #999)

支持父级批量禁用与局部覆盖

实际业务中常遇到“整个表单禁用”但某字段需例外的情况。可通过 provide/inject 实现层级透传：

• 父表单组件 provide('formDisabled', readonly(formDisabled))
• 自定义组件中 inject('formDisabled', { default: () => false })
• 最终禁用状态取 props.disabled || injectedFormDisabled，允许子组件用 :disabled="false" 覆盖父级禁用
• 这样既能统一管控，又保有灵活性，避免每个字段都手动传参