Vue3+TypeScript中使用Ref获取自定义输入组件值时返回undefined的问题求助

嗨，我刚看完你的问题，其实问题出在你对<Field>组件的ref理解上～你用的<Field>并不是原生的<input>标签，而是UI组件库（比如常见的VeeValidate Field组件）提供的封装组件，所以你通过ref获取到的是组件实例，不是原生的HTMLInputElement，自然就没有原生input的.value属性，这就是为什么打印出来一直是undefined。

下面给你两种靠谱的解决思路，按需选择：

方法一：优先使用组件库提供的API（推荐） #

如果你的<Field>是VeeValidate的组件，它本身提供了专门的API来获取表单字段的值，完全不需要直接操作DOM：

<template> 
  <Field type="text" name="test" /> 
  <span @click="testFunc()">Test</span> 
</template> 

<script setup lang="ts">
import { useField } from 'vee-validate';

// 通过useField获取对应name字段的响应式值
const { value } = useField('test');

const testFunc = () => {
  // 直接访问响应式value的value属性即可拿到输入值
  console.log(value.value);
};
</script>

这种方式完全符合Vue的响应式设计理念，也不用担心组件内部结构变化导致代码失效，是最推荐的做法。

方法二：获取原生input元素（不推荐，仅特殊场景用） #

如果你确实需要直接操作原生input，可以先确认<Field>组件是否暴露了内部的input引用。不同组件库的暴露方式可能不同，比如有些会把原生input的ref命名为inputRef，你可以这样获取：

<template> 
  <Field type="text" name="test" ref="fieldRef" /> 
  <span @click="testFunc()">Test</span> 
</template> 

<script setup lang="ts">
import { ref } from 'vue';
// 这里的typeof Field需要根据你导入的组件来调整
const fieldRef = ref<InstanceType<typeof Field> | null>(null);

const testFunc = () => {
  // 先判断组件实例存在，再访问内部的inputRef
  if (fieldRef.value?.inputRef) {
    console.log(fieldRef.value.inputRef.value);
  }
};
</script>

如果你用的是自定义的<Field>组件，那需要在组件内部手动暴露原生input的ref：

<!-- Field.vue 组件内部 -->
<template>
  <input type="text" ref="inputRef" />
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue';

const inputRef = ref<HTMLInputElement | null>(null);
// 暴露ref给父组件
defineExpose({ inputRef });
</script>

这样父组件就能通过fieldRef.value.inputRef?.value拿到原生input的值了。

给Vue+TS新手的小提示 #

Vue3提倡用响应式数据驱动视图，尽量避免直接操作DOM，尤其是组件库的组件。优先使用组件提供的官方API来处理表单值，不仅代码更简洁，也能避免很多不必要的问题～

内容的提问来源于stack exchange，提问作者ACD