VuetifyJS：如何在自定义子组件中获取v-form的disabled状态

Vuetify的v-form内部是通过Provide/Inject机制向下传递disabled状态的，内置的v-input系列组件正是通过这个机制自动获取表单的禁用状态。自定义组件可以直接复用这套机制，无需逐层传递属性。

核心实现步骤 #

直接在自定义组件中注入v-form提供的formDisabled状态即可：

Vue 2 选项式API示例

<template>
  <div :class="{ 'custom-disabled': isFormDisabled }">
    <!-- 自定义组件的UI内容，这里用原生input做示例 -->
    <input type="text" :disabled="isFormDisabled" placeholder="自定义组件输入框" />
  </div>
</template>

<script>
export default {
  name: 'MyOwnComponent',
  // 注入v-form提供的formDisabled状态
  inject: ['formDisabled'],
  computed: {
    isFormDisabled() {
      // 处理组件不在v-form内的情况，默认启用状态
      return this.formDisabled ?? false;
    }
  }
};
</script>

<style scoped>
.custom-disabled {
  opacity: 0.6;
  pointer-events: none;
}
</style>

Vue 3 组合式API示例

<template>
  <div :class="{ 'custom-disabled': isFormDisabled }">
    <input type="text" :disabled="isFormDisabled" placeholder="自定义组件输入框" />
  </div>
</template>

<script setup>
import { inject, computed } from 'vue';

// 注入v-form的disabled状态，默认值为false
const formDisabled = inject('formDisabled', false);
const isFormDisabled = computed(() => formDisabled ?? false);
</script>

<style scoped>
.custom-disabled {
  opacity: 0.6;
  pointer-events: none;
}
</style>

关键说明 #

1. 无需额外配置v-form：v-form组件已经内置了provide('formDisabled', this.disabled)的逻辑，不需要手动添加额外代码。
2. 嵌套表单兼容：如果存在多层嵌套的v-form，注入的formDisabled会自动取当前最内层表单的状态，符合预期。
3. 边界处理：如果自定义组件不在v-form内部，inject会使用我们设置的默认值false，保证组件正常工作。

内容的提问来源于stack exchange，提问作者Alex Schenkel