So erhalten Sie einen Elementknoten über ref in vue3

Elementknoten über Ref abrufen

ref In vue2 kann man sagen, dass die js-native document.getElementById("#id")-Operation vereinfacht wird. Natürlich ist es in vue3 dasselbe. Sobald dieses Referenzobjekt erstellt wurde, kann auf seinen Wert zugegriffen werden

Aber. Darauf kann im Setup zugegriffen werden, aber der direkt gedruckte Wert ist null...

Aufgrund der Ausführungszeit der Setup-Funktion vor dem Beim Rendern des HTML-Tags können wir das Box-Tag nicht direkt in der Setup-Funktion initialisieren.

In der Lebenszyklusfunktion wird die Setup-Funktion zwischen beforeCreate und Created ausgeführt

Wenn es eine Initialisierung oder ähnliche Vorgänge gibt, müssen Sie onMounted in der Lebenszyklusfunktion ausleihen# 🎜🎜 #

Auf diese Weise können Sie auf

Zusammenfassung mehrerer Möglichkeiten zugreifen ref-Elemente

1. Native js erhält Dom-Elemente

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)

2. ref erhält ein einzelnes Dom-Element

<template>
   <div ref=&#39;divDom&#39;></div> 
</template>
<script setup>
import { ref} from &#39;vue&#39;
const divDom = ref(null);
onMounted(()=>{
    console.log(&#39;获取dom元素&#39;,divDom)
})

3. ref erhält das v- für Schleifen-Dom-Element

<template>
   <div ref=&#39;getDivDom&#39; v-for="item in list" :data-id="item.id"></div> 
</template>
<script setup>
import { ref} from &#39;vue&#39;
const divDomList = ref(new Map());

const getDivDom = el=>{
    if(el){
        divDomList.set(el.dataset[&#39;id&#39;],el) 
    }
}
// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素

4. Holen Sie sich das Dom-Element von Swiper in Swiper

<template>
   <swiper @swiper=&#39;getSwiper&#39;></swiper > 
</template>
<script setup>
import swiper from &#39;swiper&#39;
import { ref} from &#39;vue&#39;
const swiperDom= ref(null);

const getSwiper= el=>{
    swiperDom.value = el;
}

Das obige ist der detaillierte Inhalt vonSo erhalten Sie einen Elementknoten über ref in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!