Comment obtenir le nœud d'élément via ref dans vue3

Obtenir les nœuds d'éléments via ref

ref Dans vue2, on peut dire que cela simplifie l'opération document.getElementById("#id") natif js. Bien sûr, c'est pareil dans vue3

D'abord, donnez à l'élément pour lequel vous souhaitez obtenir un attribut ref

Ensuite, Une fois cet objet ref créé, sa valeur est accessible

Mais. Ceci est accessible dans le setup, mais la valeur imprimée directement est nulle...

En raison du temps d'exécution de la fonction de configuration avant le rendu de la balise html, on ne peut pas initialiser la balise box directement dans la fonction setup.

Dans la fonction de cycle de vie, la fonction de configuration est exécutée entre beforeCreate et Created

S'il y a une initialisation ou des opérations similaires, vous devez emprunter surMounted#🎜🎜 dans la vie fonction cycle #

De cette façon, vous pouvez accéder

Résumé de plusieurs façons d'obtenir ref elements

1. Native js obtient des éléments dom

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

2. ref obtient un seul élément dom

<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. for loop 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. Obtenez l'élément dom de swiper dans 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;
}

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!