vue3中默认父组件通过ref绑定子组件是获取不到子组件中的dom和变量、方法的，子组件需要通过defineExpose方法把需要暴露的东西暴露出去，父组件才能拿的到，实例演示一下：

子组件 Child.vue

<template>
  <div>
    <input type="text" v-model="content" />
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
const content = ref('')
</script>

父组件 Father.vue

<template>
  <div>
    <Child ref='rChild' />
  </div>
</template>
<script lang='ts' setup>
import { ref,onMounted } from 'vue'
import Child from './Child.vue'
const rChild= ref(null)
onMounted(()=>{
  console.log(rChild.value)
})
</script>

打印出来是一个proxy对象，里面拿不到子组件的任何信息，通过defineExpose改造一下子组件，即可能拿到子组件里面的内容

改造子组件 Child.vue

<template>
  <div ref='rInput'>
    <input type="text" v-model="content" />
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
const content = ref('')
const rInput = ref(null)
defineExpose({rInput,content })
</script>

通过上面的子组件的改造，那父组件就可以通过rChild.value.content和rChild.value.rInput拿到子组件中的content的变量及dom结构。