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>