Vue3组合式API：子组件如何正确访问父组件DOM元素？

方法1：监听props的变化 #

子组件中通过watch监听传入的svgContainer，因为ref的赋值是异步的，子组件挂载时父组件的SVG元素可能还未完成挂载。通过watch可以捕获到ref的更新：

<script setup>
import { watch } from 'vue'

const props = defineProps(['svgContainer'])

watch(
  () => props.svgContainer,
  (container) => {
    if (container) {
      console.log(container)
      // 在这里执行需要操作SVG的逻辑
    }
  },
  { immediate: true } // 立即执行一次监听回调
)
</script>

方法2：延迟子组件渲染时机 #

在父组件中用v-if控制子组件的渲染，只有当svgContainer存在时才渲染子组件，确保子组件挂载时SVG元素已经就绪：

<template>
  <svg ref="svgContainer" class="circle-svg"></svg>
  <TTAGs v-if="svgContainer" :svgContainer="svgContainer" />
</template>

<script setup>
import { ref } from 'vue'

const svgContainer = ref(null)
</script>

此时子组件的onMounted中就能直接拿到有效的DOM元素：

<script setup>
import { onMounted } from 'vue'

const props = defineProps(['svgContainer'])

onMounted(() => {
  console.log(props.svgContainer) // 正常输出SVG元素
})
</script>

方法3：通过子组件暴露方法传递ref #

父组件在SVG元素挂载完成后，调用子组件暴露的方法传递ref，确保时机正确：

子组件代码 #

<script setup>
const setSvgContainer = (container) => {
  console.log(container)
  // 处理SVG元素的逻辑
}

// 暴露方法给父组件
defineExpose({ setSvgContainer })
</script>

父组件代码 #

<template>
  <svg ref="svgContainer" class="circle-svg"></svg>
  <TTAGs ref="ttagComponentRef" />
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const svgContainer = ref(null)
const ttagComponentRef = ref(null)

onMounted(async () => {
  // 等待DOM更新完成，确保SVG元素已挂载
  await nextTick()
  if (svgContainer.value && ttagComponentRef.value) {
    ttagComponentRef.value.setSvgContainer(svgContainer.value)
  }
})
</script>

内容的提问来源于stack exchange，提问作者DuchSuvaa