vue3 - 如何在Vue 3中使用defineExpose处理通过ref获取的Element Plus el-form组件方法？

Question

defineExpose如何处理ref获取到的组件方法。如把el-form的方法暴露出去。通过ref获取。但是defineExpose处理时。el-form还未获取到。导致暴露为null

如下一个form

<el-form ref="formRef"></el-form>

通过ref获取

import type { FormInstance} from 'element-plus';
const formRef=ref<FormInstance>()

暴露给defineExpose由于此时formRef.value为null.暴露失败目前是通过自定义方法调用暴露。有好方法处理这个问题吗

defineExpose({...formRef.value });
// const validate = (...args: any) => formRef.value?.validate(...args);
// const resetFields = (...args: any) => formRef.value?.resetFields(...args);

// defineExpose({ formRef, validate, resetFields });

Answer 1

使用代理：

const formRef = ref<FormInstance>()

defineExpose(
  new Proxy({} as NonNullable<typeof formRef.value>, {
    get(target, p, receiver) {
      if (Reflect.has(target, p)) return Reflect.get(target, p, receiver)
      else return Reflect.get(formRef.value ?? {}, p)
    },
    has(target, p) {
      return (
        Reflect.has(target, p) || (formRef.value !== undefined && Reflect.has(formRef.value, p))
      )
    },
  })
)

注意，这样直接暴露可能导致潜在的问题，例如：

// comp.vue
<div class='comp'>
    <el-form ref="formRef"></el-form>
</div>

// parent.vue
<comp ref='r' />

当外层使用 r.$el 时，parent 期望获取组件的元素 div.comp，但它实际得到的是 formRef.value.$el，即 <el-form> 组件的元素 form.el-form

Answer 2

你自己注释掉的部分是ok的啊。

import type { FormInstance} from 'element-plus';
const formRef = ref<FormInstance>()

const validate = (...args: any) => formRef.value?.validate(...args);
const resetFields = (...args: any) => formRef.value?.resetFields(...args);

defineExpose({ 
  formRef, // 是响应式的值，没问题 
  validate,  // 是函数，没问题
  resetFields // 是函数，没问题
});

需要注意的是暴露的 validate resetFields 丢失了函数签名。

Answer 3

对于 Element Plus 的 el-form 组件，通常不需要通过 defineExpose 来处理其内部方法，因为 el-form 提供的方法（如 validate）是通过 ref 或 v-model:model（对于表单验证）直接在模板或组件的 <script setup> 中访问的。

资料请参考：https://mybj123.com/22960.html