vue3中通过ref获取子组件实例，取值为undefined

也就是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') // 响应式数据：msg
    const fileList = ref([]) // 响应式数据：上传的文件列表
    function selectFile () { // 有文件上传时
      var file = document.getElementById('fileInput').files[0] // File(Blob) 对象   File extends Blob
      fileList.value.push(file)
    }
    return { // return中的数据会被父组件拿到
      msg,
      fileList,
      selectFile
    }
  }
})
script>
 

父组件

<template>
  <div class="home">
    <HelloWorld ref="sonRef" />
    <button @click="getSonComponent">GetSonComponentbutton>
  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