vue3 setup訪問子組件的 DOM 元素

使用setup的情況下這個時候我們無法使用this，注意在setup中setup是封閉的，不會將子組件事件暴露出來，所以要用defineExpose()，將需要在父組件調(diào)用的函數(shù)暴露出去，子組件代碼如下：

<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 函數(shù)，在父組件中訪問子組件的 DOM 元素。在這種情況下，getDom 函數(shù)返回的是 inpRef.value，即子組件的 DOM 元素。
因為這個引用是直接通過 ref 創(chuàng)建的，并在子組件的 defineExpose 中暴露給父組件，所以不需要考慮異步渲染的問題。當(dāng)父組件的 mounted 鉤子函數(shù)執(zhí)行時，子組件的 defineExpose 已經(jīng)完成，并且可以直接訪問子組件的 DOM 元素。
所以，通過在子組件中拋出 DOM 的方式，可以直接在父組件中訪問子組件的 DOM 元素，而不需要考慮異步渲染的延遲問題。也就無需加nextTick()。

vue3訪問子組件的 DOM 元素的方法總結(jié)

在 Vue 3 中，訪問子組件的 DOM 元素是一個常見的需求。本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素。

方法一

使用ref和refs：在父組件中，可以通過 ref 和 refs 來獲取子組件的 DOM 元素。在模板中使用 ref 聲明引用變量，并將其綁定到子組件的 ref 屬性上。然后，在父組件的鉤子函數(shù)（如 mounted）中，通過 this.refs 訪問子組件的引用，使用 .{refName} 來訪問子組件實例的屬性和方法。通過 .$el 可以獲取子組件的 DOM 元素。

方法二

在 < script setup> 中訪問子組件的 DOM 元素：在 Vue 3 中，可以使用 < script setup> 區(qū)塊和 Composition API 的語法來編寫組件邏輯。在父組件的 < script setup> 區(qū)塊中，可以使用 onMounted 鉤子函數(shù)來訪問子組件的 DOM 元素。使用 ref 創(chuàng)建引用并綁定到子組件的 ref 屬性上，然后在 onMounted 鉤子函數(shù)中使用 childRef.value.$el 來訪問子組件的 DOM 元素。

實例演示

但是會出現(xiàn)這種情況：對于父組件的 mounted 鉤子函數(shù)，確實表示父組件的模板已經(jīng)被渲染成真實的 DOM。在大多數(shù)情況下，子組件也應(yīng)該在父組件的 mounted 鉤子函數(shù)執(zhí)行時已經(jīng)被渲染完成。然而，由于 Vue 的異步渲染策略，某些情況下子組件的 DOM 元素可能仍然未完全渲染。這種情況通常發(fā)生在以下情況下：

• 子組件包含異步操作或延遲加載的內(nèi)容：如果子組件內(nèi)部包含異步操作，例如從服務(wù)器加載數(shù)據(jù)或執(zhí)行動畫效果，子組件的 DOM 元素可能需要更長的時間才能完全渲染。
• 父組件與子組件之間存在過渡效果：如果在父組件中使用了過渡效果（例如 < transition> 或 < transition-group>），那么在父組件的 mounted 鉤子函數(shù)中訪問子組件的 DOM 元素時，可能會遇到過渡效果尚未完成的情況。

在這些情況下，盡管父組件的模板已經(jīng)被渲染成真實的 DOM，但子組件的 DOM 元素可能尚未完全渲染。因此，在父組件的 mounted 鉤子函數(shù)中立即訪問子組件的 DOM 元素可能會導(dǎo)致獲取到不完整或錯誤的信息。

1.使用 nextTick( ) 解決異步渲染問題：在某些情況下，子組件的 DOM 元素可能尚未完全渲染，即使在父組件的 mounted 鉤子函數(shù)中。這是因為 Vue 的異步渲染策略。為了解決這個問題，可以使用 nextTick() 函數(shù)，在父組件的 mounted 鉤子函數(shù)中等待子組件的 DOM 元素渲染完成后再進(jìn)行操作。通過 nextTick() 函數(shù)可以確保獲取到正確的子組件 DOM 元素。 方法三

使用setup的情況下這個時候我們無法使用this，注意在setup中setup是封閉的，不會將子組件事件暴露出來，所以要用defineExpose()，將需要在父組件調(diào)用的函數(shù)暴露出去，子組件代碼如下：

父組件代碼如下：

這種方法通常不需要考慮異步渲染的問題，是因為在子組件的 defineExpose 中，直接將 DOM 引用暴露給了父組件，而不需要等待異步操作完成。通過使用 defineExpose 拋出 getDom 函數(shù)，在父組件中訪問子組件的 DOM 元素。在這種情況下，getDom 函數(shù)返回的是 inpRef.value，即子組件的 DOM 元素。因為這個引用是直接通過 ref 創(chuàng)建的，并在子組件的 defineExpose 中暴露給父組件，所以不需要考慮異步渲染的問題。當(dāng)父組件的 mounted 鉤子函數(shù)執(zhí)行時，子組件的 defineExpose 已經(jīng)完成，并且可以直接訪問子組件的 DOM 元素。所以，通過在子組件中拋出 DOM 的方式，可以直接在父組件中訪問子組件的 DOM 元素，而不需要考慮異步渲染的延遲問題。也就無需加nextTick().

通過上述方法，可以在 Vue 3 中輕松地訪問子組件的 DOM 元素。這對于執(zhí)行諸如測量元素大小、計算位置、添加樣式等操作非常有用。

到此這篇關(guān)于vue3 setup訪問子組件的 DOM 元素的文章就介紹到這了,更多相關(guān)vue3 setup DOM 元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論