Vue3组件中如何通过Ref获取自定义输入组件的值？

方案1：用v-model双向绑定（推荐） #

这是Vue组件通信的标准做法，不用依赖ref就能实时拿到输入值：

• 自定义输入组件内部（Vue3）：

<!-- CustomInput.vue -->
<template>
  <input 
    type="text" 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
// 接收父组件传递的绑定值
defineProps(['modelValue'])
// 定义更新值的事件
defineEmits(['update:modelValue'])
</script>

• 父组件使用：

<template>
  <CustomInput v-model="username" @input="handleCheck" />
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')

const handleCheck = () => {
  // 直接用username.value做正则校验
  const reg = /^[a-zA-Z0-9]{6,16}$/
  console.log('输入是否合法：', reg.test(username.value))
}
</script>

父组件的username会和输入框值实时同步，直接拿来校验即可，完全不需要ref。

方案2：通过ref暴露内部原生input #

如果一定要保留ref的用法，可以把组件内部的原生input实例暴露给父组件：

• 自定义输入组件内部：

<!-- CustomInput.vue -->
<template>
  <input ref="inputRef" type="text" />
</template>

<script setup>
import { ref } from 'vue'
const inputRef = ref(null)
// 把内部的inputRef暴露给父组件
defineExpose({ inputRef })
</script>

• 父组件使用：

<template>
  <CustomInput ref="customInputRef" @input="handleCheck" />
</template>

<script setup>
import { ref } from 'vue'
const customInputRef = ref(null)

const handleCheck = () => {
  // 逐层获取内部input的值
  const inputValue = customInputRef.value.inputRef.value.value
  const reg = /^[a-zA-Z0-9]{6,16}$/
  console.log('输入是否合法：', reg.test(inputValue))
}
</script>

方案3：组件内部封装校验逻辑 #

如果校验是该输入组件的通用逻辑，直接在组件内部处理，把结果传给父组件更省心：

• 自定义输入组件内部：

<!-- CustomInput.vue -->
<template>
  <input 
    type="text" 
    :value="modelValue" 
    @input="handleInput"
  />
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue', 'checkResult'])

const handleInput = (e) => {
  const value = e.target.value
  emit('update:modelValue', value)
  // 内部执行正则校验，把结果传给父组件
  const reg = /^[a-zA-Z0-9]{6,16}$/
  emit('checkResult', reg.test(value))
}
</script>

• 父组件使用：

<template>
  <CustomInput v-model="username" @checkResult="handleCheckResult" />
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')

const handleCheckResult = (isValid) => {
  console.log('输入是否合法：', isValid)
}
</script>

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