Vue之循环<component>组件时调用子组件的校验方法实现多态

本代码通过Vue循环<component>组件时，调用子组件的校验方法，实现多态，避免修改父组件，增强扩展性。

父组件原代码：

<div v-for="comp in compList">
  <template v-if="comp.isShow">
    <component
      :is="compMap[comp.type]"
      :item="comp"
      :formData="formData"
      :compList="compList"
      :userInfo="userInfo"
      class="comp"
      v-if="isLoadedData && isComponentsShow"
    />
  </template>
</div>

由于有v-for所以新增动态ref

<div v-for="comp in compList">
  <template v-if="comp.isShow">
    <component
      :is="compMap[comp.type]"
      :item="comp"
      :formData="formData"
      :compList="compList"
      :userInfo="userInfo"
      class="comp"
      v-if="isLoadedData && isComponentsShow"
      :ref="setDynamicRef(comp.prop)"
    />
  </template>
</div>

动态生成ref

// 用于存储动态 ref 的对象
const dynamicComponentRefs = ref({});

// 设置动态 ref 的方法
const setDynamicRef = (prop) => {
  return (el) => {
    dynamicComponentRefs.value[prop] = el;
  };
};

父组件调用

if (
  dynamicComponentRefs.value[comp.prop] &&
  comp.regExp &&
  comp.regExp !== ""
) {
  const res =
    dynamicComponentRefs.value[comp.prop].validateCompValue(comp);
  if (!res) {
    return;
  }
}

子组件定义校验方法并暴露方法

const validateCompValue = (comp) => {
  const val = formData.value[comp.prop];
  if (!new RegExp(comp.regExp).test(val)) {
    message.error(comp.regExpTip);
    return false;
  } else {
    return true;
  }
};

// 向外暴露方法
defineExpose({
  validateCompValue,
});

即可。