【Vue3+Ts】父组件使用setup语法糖获取不到子组件实例原因

错误代码：

子组件：

<template>
    <div></div>
</template>

<script setup lang="ts">
// 引入defineExpose 将数据暴露
import {defineExpose} from 'vue'
// 定义一个变量
let test = {name: 'xiaoman'}
// 暴露给父组件
defineExpose({test})
</script>

父组件接收：

<template>
  <Child ref="child" ></Child>
</template>

<script setup lang="ts">
import Child from './Child'
import { ref, onMounted } from 'vue'

const childComp = ref<InstanceType<typeof Child>>()

onMounted(() => {
  console.log(childComp.value) // undefined
  console.log(childComp.value.test, '???') // 报错：找不到test变量
})
</script>

<style scoped>

</style>

在onMounted里面获取不到子组件实例和暴露出来的对象

后来找到了问题：

接收子组件实例的变量一定要和子组件标签里面ref的赋值一致！！！

接收子组件实例的变量一定要和子组件标签里面ref的赋值一致！！！

接收子组件实例的变量一定要和子组件标签里面ref的赋值一致！！！

 改正后的父组件代码：

<template>
  <Child ref="child" :title="name" :arr="[1,2,3]" @on-click="getName" ></Child>
</template>

<script setup lang="ts">
import Child from './Child'
import { ref, onMounted } from 'vue'

// child这个变量必须和子组件里面的ref定义的一模一样
const child = ref<InstanceType<typeof Child>>()

onMounted(() => {
  console.log(child.value)
  console.log(child.value.test, '???')
})
</script>

<style scoped>

</style>

也能打印出值了：

浅浅总结一下Vue3 setup语法糖下父组件用ref无法获取到子组件的原因：

1.子组件的数据没有用defineExpose暴露

2.子组件标签的ref的赋值和父组件赋值变量时的命名不一致

3.没有用.value获取

4.没有在onMounted获取，组件还没有挂载完毕