vue3 setup訪問(wèn)子組件的 DOM 元素

使用setup的情況下這個(gè)時(shí)候我們無(wú)法使用this，注意在setup中setup是封閉的，不會(huì)將子組件事件暴露出來(lái)，所以要用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())
})

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

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

在 Vue 3 中，訪問(wèn)子組件的 DOM 元素是一個(gè)常見(jiàn)的需求。本文將介紹如何在 Vue 3 中使用不同的方法來(lái)獲取子組件的 DOM 元素。

方法一

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

方法二

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

實(shí)例演示

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

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

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

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

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

父組件代碼如下：

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

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

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

最新評(píng)論