也就是Vue3如何通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，今天写index.vue(父组件）时想获取子组件的数据和方法，通过给子组件绑定ref，打印子组件的数据为undefined；百度搜索常用方法为：

参考连接：Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，vue3中ref的妙用，vue中获取调用子组件方法，vue中使用子组件数据_vue3 获取组件ref_imkaifan的博客-CSDN博客代码如下：

子组件

<template><div class="hello"><h1>{{ msg }}</h1><input type="file" id="fileInput" name="file" multiple="multiple" @change="selectFile"/></div>
</template><script>
import { defineComponent, ref } from 'vue'
export default defineComponent({name: 'HelloWorld',setup() {const msg = ref('HelloWorld') // 响应式数据：msgconst fileList = ref([]) // 响应式数据：上传的文件列表function selectFile () { // 有文件上传时var file = document.getElementById('fileInput').files[0] // File(Blob) 对象   File extends BlobfileList.value.push(file)}return { // return中的数据会被父组件拿到msg,fileList,selectFile}}
})
</script>

父组件

<template><div class="home"><HelloWorld ref="sonRef" /><button @click="getSonComponent">GetSonComponent</button></div>
</template><script>
import { defineComponent, ref } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'export default defineComponent({name: 'Home',components: {HelloWorld},setup(){const sonRef = ref(null) // 通过 ref 绑定子组件function getSonComponent () { // 通过 ref 获取子组件\// 获取子组件的数据console.log(sonRef.value)console.log(sonRef.value.msg)sonRef.value.fileList.forEach(item => {console.log(item)})}return {sonRef,getSonComponent}}
})
</script>

而我通过ref获取组件实例的数据打印为undefined的代码为：

父组件

<template><div><welcome></welcome></div>
</template><script setup lang="ts">import welcome from './welcome.vue'import { ref,onMounted } from 'vue'const welcomeRef = ref(null);
console.log("welcomeRef ",welcomeRef.value.isScroll)  //welcomeRef undefined
<script>

子组件

<template><div v-if="isScroll">测试内容1</div><div v-else>测试内容2</div>
</template><script setup lang="ts">import { ref,onMounted } from 'vue'const isScroll= ref(false);
<script>

后来查阅资料得出：

基于 <script setup> + TS 的情况

分三步

1、在子组件暴露需要被父组件调用的属性

2、在子组件定义类型

3、父组件引入子组件的类型，并定义 ref

第一步：defineExpose 暴露子组件属性
defineExpose({ select })

第二步：在子组件定义组件实例类型
如果完成第一步的话，在父组件调用子组件实例里某个属性的时候，TS 会报错，找不到该属性（但不影响运行）所以这里还需要定义一个类型，来声明子组件实例的类型

第三步：定义子组件的暴露的数据类型，并定义 ref
声明子组件的 ref ，获取子组件实例（注意只能使用暴露出来的属性）