vue3 setup $refs报错解决

在 Vue 3 中，由于 `this` 不再指向组件实例，因此不能再像 Vue 2 中那样直接使用 `$refs` 来获取组件的引用。相反，可以使用 `ref` 函数来创建一个响应式的引用，并使用 `setup` 函数中的 `onMounted` 钩子函数来获取组件的引用。例如：

<template>
  <el-form ref="formRef" :model="formData">
    <!-- 表单元素 -->
  </el-form>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const formRef = ref(null); // 创建一个响应式的引用

    onMounted(() => {
      console.log(formRef.value); // 在 onMounted 钩子函数中获取引用
    });

    return {
      formRef,
      formData: {
        // 表单数据对象
      },
    };
  },
};
</script>

在上面的例子中，使用 `ref` 函数创建了一个响应式的引用 `formRef`，然后在 `onMounted` 钩子函数中使用 `formRef.value` 来获取 `ElForm` 组件的引用。需要注意的是，由于 `formRef` 是一个响应式的引用，因此在模板中使用时，需要使用 `formRef` 而不是 `$refs.formRef`。