vue3 setup访问子组件的 DOM 元素

使用setup的情况下这个时候我们无法使用this，注意在setup中setup是封闭的，不会将子组件事件暴露出来，所以要用defineExpose()，将需要在父组件调用的函数暴露出去，子组件代码如下：

<template>
  <div ref="domRef">
    <div>哈哈哈哈</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const domRef = ref(null)

const getRef = () => {
  return domRef.value
}

defineExpose({
  getRef
})
</script>

父组件：

<template>
  <PointPopup ref="popupRef" />
</template>

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

const popupRef = ref(null)

onMounted(() => {
  // 打印子组件DOM
  console.log('child', popupRef?.value?.getRef())
})

这种方法通常不需要考虑异步渲染的问题，是因为在子组件的 defineExpose 中，直接将 DOM 引用暴露给了父组件，而不需要等待异步操作完成。
通过使用 defineExpose 抛出 getDom 函数，在父组件中访问子组件的 DOM 元素。在这种情况下，getDom 函数返回的是 inpRef.value，即子组件的 DOM 元素。
因为这个引用是直接通过 ref 创建的，并在子组件的 defineExpose 中暴露给父组件，所以不需要考虑异步渲染的问题。当父组件的 mounted 钩子函数执行时，子组件的 defineExpose 已经完成，并且可以直接访问子组件的 DOM 元素。
所以，通过在子组件中抛出 DOM 的方式，可以直接在父组件中访问子组件的 DOM 元素，而不需要考虑异步渲染的延迟问题。也就无需加nextTick()。