Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，vue3中ref的妙用，vue中获取调用子组件方法，vue中使用子组件数据

需求

在vue中有这样一中情况： 在父组件中需要调用子组件的方法，甚至是用到子组件中数据，这种情况怎么做？

解决

Vue3中，如果要在父组件拿到子组件(子组件的DOM结构、数据、方法)，可以通过 ref。

1. 在父组件中定义响应式数据 ref(null) ，并绑定给子组件。
2. 在需要的时候，通过定义的响应式变量即可获取。获取后，即获取了子组件的一切，可以看到子组件的DOM结构，也可以看到子组件中对外暴露的的数据和方法，并且可以直接调用。

官方对于以上用法的说明

代码

子组件：

<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">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>