Vue3中如何通过ref获取GMapAutocomplete组件的input原始值？

问题背景 #

作为Vue3新手，尝试访问GMapAutocomplete组件内部input的原始值但无法实现，以下是相关代码：

父组件代码 #

<template>
  <div class="location-input">
    <GMapAutocomplete
      class="search"
      placeholder="Szukaj..."
      ref="autocomplete"
      @place_changed="onChange"
    >
    </GMapAutocomplete>
    <font-awesome-icon icon="fa-solid fa-check" style="color: green;"/>
    <font-awesome-icon icon="fa-solid fa-xmark" style="color: red;"/>
  </div>
</template>

<script setup>
import { defineEmits, ref } from "vue";
let autocomplete = ref(null);

const onChange = async (value) => {
  await new Promise(resolve => {
    setTimeout(async () => {resolve()}, 1500)
  })
  // 此处无法获取到目标input
  console.info(autocomplete.input)
  emit('change', value)
}

const emit = defineEmits(['change'])
</script>

GMapAutocomplete组件模板 #

<template>
  <input ref="input" v-bind="$attrs" v-on="$attrs" />
</template>

问题原因 #

1. Ref对象取值逻辑错误：Vue3中通过ref绑定组件后，autocomplete是一个Ref对象，实际组件实例存储在.value属性中，直接访问autocomplete.input是在访问Ref对象本身的属性，而非组件实例的属性。
2. 子组件内部ref私有性限制：GMapAutocomplete组件内部的input ref默认是组件私有成员，父组件无权限直接访问，必须由子组件主动暴露。

解决方案 #

步骤1：修改GMapAutocomplete组件，暴露内部input ref #

在组件的<script setup>中添加defineExpose，将内部的input ref暴露给父组件：

<template>
  <input ref="input" v-bind="$attrs" v-on="$attrs" />
</template>

<script setup>
import { ref, defineExpose } from 'vue'
const input = ref(null)
// 主动暴露input ref给父组件
defineExpose({ input })
</script>

步骤2：修正父组件的访问方式 #

父组件中需要先获取Ref对象的.value（即组件实例），再访问暴露的input属性：

// 原错误代码
// console.info(autocomplete.input)
// 修改后代码
console.info(autocomplete.value.input)

完成以上修改后，即可正常访问GMapAutocomplete组件内部的input元素及其原始值。

内容的提问来源于stack exchange，提问作者Michał Topór