vue3中ref绑定自定义组件没有获取到dom

问题

<template>
  <my-comp ref="test" />
</template>
<script lang="ts" setup>
  const test = ref()
  onMounted(() => {
      console.log(test.value)
  })
</script>

打印出来的是一个proxy对象

解决办法

1.如果ref绑定的是一个普通的dom元素，就能打印出来dom对象

2.如果是自定义组件，需要自定义组件暴露出ref

在子组件中绑定ref之后还需要用defineExpose暴露出来，如果想调用子组件的方法，也需要暴露出来方法

// 子组件
<template>
  <div ref="dom" />
</template>
<script lang="ts" setup>
  const dom = ref()
  defineExpose({dom})
</script>

// 父组件
<template>
  <my-comp ref="test" />
</template>
<script lang="ts" setup>
  const test = ref()
  onMounted(() => {
      console.log(test.value.dom)
  })
</script>