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>