一、「效果图」

🤐话不多说，我们直接上图

简单介绍一下需求：只有在某种特定的情况下需要将表单的某一项设置为必选项。

二、「先说结论」

首先先介绍一下解决的方案：使用ref定义校验规则配合ref/computed设置校验规则的required属性。rules属性必须使用ref定义否则required属性将不允许使用Ref类型，部分代码如下：

const form: Ref<Form> = ref({
  name: '',
  age: '',
  postalCode: '',
  province: '',
  city: '',
  district: ''
});
const districtWritten = computed(() => !!form.value.district);
const rules: Ref<FormRules<Form>> = ref({
  postalCode: [
    {
      required: districtWritten,
      message: 'Please input postalCode',
      trigger: 'blur'
    }
  ]
});

三、「关于原因的猜测」

猜测是传递给子组件一个Ref对象时Vue会对Ref对象进行一个深度的解包，因此在子组件中得到的对象是一个Normal对象。因此在required被使用时得到的并不是ComputedRef对象的引用，而是.value 对应的值。

四、「Demo仓库」

本文对应的Demo将放在仓库：github.com/Lei-Plna/dy…