VUE3 无法读取未定义的属性（正在读取“refLoginFrom”）

在 Vue3 中，如果出现 “无法读取未定义的属性” 的错误提示，一般是因为你在组件中使用了未定义的变量或属性。在你的问题中，错误提示是 “正在读取‘refLoginFrom’”，说明你在组件中使用了一个名为 “refLoginFrom” 的变量或属性，但是它并没有在组件的 setup 方法中进行定义。

解决这个问题，你需要在组件的 setup 方法中定义 “refLoginFrom” 变量或属性，并且使用 ref() 函数或 reactive() 函数进行响应式处理。例如：

<template>
  <form ref="refLoginFrom">
    <!-- 表单内容 -->
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const refLoginForm = ref(null)

    // 其他代码

    return {
      refLoginForm,
      // 其他返回值
    }
  }
}
</script>

这里通过 ref() 函数创建了一个名为 “refLoginForm” 的 ref 对象，然后将其添加到组件的返回值中。在模板中使用时，需要将 ref 对象绑定到表单的 ref 属性上，例如：`<form ref="refLoginForm">`。

另外，如果你使用了 TypeScript，还需要在组件的类型声明中定义 “refLoginForm” 变量或属性的类型。例如：

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const refLoginForm = ref(null)

    // 其他代码

    return {
      refLoginForm,
      // 其他返回值
    }
  }
}

interface ComponentProps {
  refLoginForm: Ref<HTMLFormElement | null>
}

export default defineComponent({
  name: 'MyComponent',
  props: {
    refLoginForm: {
      type: Object as PropType<ComponentProps['refLoginForm']>,
      required: true
    }
  },
  // 其他代码
})
</script>

这里通过 interface 定义了组件的 Props 类型，并且在 defineComponent 中进行了声明。