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结构。
