Comment Vue3 fait-il fonctionner dom ? Quatre façons de présenter

VueComment faire fonctionner dom ? L'article suivant vous présentera quatre façons d'utiliser dom dans Vue3. J'espère qu'il vous sera utile !

Récemment, les chefs de produit ont mis en avant de nombreuses exigences d'optimisation de l'expérience utilisateur, qui impliquent de nombreuses opérations DOM.

Xiao Zhang : "Lao Tie, avant, il était assez simple d'utiliser le DOM lors du développement d'un projet Vue2. Maintenant, je développe un projet vue3, et je me sens soudain confus !"

Moi : "C'est bon, les principes sont les mêmes. Ça devrait aller si je vérifie les informations !"

Cela résume plusieurs méthodes courantes de fonctionnement de dom dans Vue3 ! (Partage vidéo d'apprentissage : tutoriel vidéo vue)

Obtenir la référence dom directement via ref

<template>
    <div>
        <div ref="sectionRef"></div>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const sectionRef = ref()
</script>

En ajoutant l'attribut ref à l'élément div, afin d'obtenir cet élément, nous déclarons une référence dom avec le même name comme attribut ref Variable sectionRef, puis nous pouvons obtenir l'élément div sous la forme de sectionRef.value.

Scénarios applicables

Un seul élément dom ou un petit nombre de scénarios

Exemple de code

<template>
    <div>
        <p>通过ref直接拿到dom</p>
        <div ref="sectionRef"></div>
        <button @click="higherAction">变高</button>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const sectionRef = ref()
let height = 100;

const higherAction = () => {
    height += 50;
    sectionRef.value.style = `height: ${height}px`;
}
</script>

<style scoped>
.demo1-container {
    width: 100%;
    height: 100%;

    .ref-section {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: all .5s ease-in-out;
    }

    .btn {
        width: 200px;
        height: 50px;
        background-color: gray;
        color: #fff;
        margin-top: 100px;
    }
}
</style>

Obtenir la référence dom via la traversée ref du conteneur parent

<template>
    <div>
        <div ref="listRef">
            <div @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from &#39;vue&#39;
const listRef = ref()

Par en ajoutant au Élément parent L'attribut ref est ajouté et une variable listRef avec le même nom que l'attribut ref est déclarée. À ce moment, l'objet dom contenant les éléments enfants sera obtenu via listRef.value. les éléments enfants peuvent être obtenus via listRef.value.children[index]. Obtenez l'élément enfant dom

Scénarios applicables

Scénarios avec un nombre fixe d'éléments générés via la boucle v-for

Exemple de code

<template>
    <div>
        <p>通过父容器遍历拿到dom</p>
        <div ref="listRef">
            <div @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from &#39;vue&#39;
const listRef = ref()
const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7, 8]
})

const higherAction = (index: number) => {
    let height = listRef.value.children[index].style.height ? listRef.value.children[index].style.height : &#39;20px&#39;;
    height = Number(height.replace(&#39;px&#39;, &#39;&#39;));
    listRef.value.children[index].style = `height: ${height + 20}px`;
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
        .list-item {
            width: 200px;
            height: 20px;
            background-color: pink;
            color: #333;
            transition: all .5s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>

Mettez la référence dom dans le tableau via : ref

<template>
    <div>
        <div>
            <div :ref="setRefAction" @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from &#39;vue&#39;

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const setRefAction = (el: any) => {
    state.refList.push(el);
}
</script>

Appelez la méthode setRefAction via la boucle :ref Cette méthode recevra un paramètre el par défaut.

À l'heure actuelle, le sous-élément dom peut être obtenu sous la forme de state.refList[index]

Scénarios applicables

Scénarios avec un nombre non fixe ou plusieurs éléments générés via la boucle v-for

Exemple de code

<template>
    <div>
        <p>通过:ref将dom引用放到数组中</p>
        <div>
            <div :ref="setRefAction" @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from &#39;vue&#39;

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const higherAction = (index: number) => {
    let height = state.refList[index].style.height ? state.refList[index].style.height : &#39;20px&#39;;
    height = Number(height.replace(&#39;px&#39;, &#39;&#39;));
    state.refList[index].style = `height: ${height + 20}px`;
    console.log(state.refList[index]);
}

const setRefAction = (el: any) => {
    state.refList.push(el);
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
        .list-item {
            width: 200px;
            height: 20px;
            background-color: pink;
            color: #333;
            transition: all .5s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>

Passez la référence via le sous-composant émet

<template>
    <div ref="cellRef" @click="cellAction">
        <span>{{item}}</span>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;;

const props = defineProps({
    item: Number
})
const emit = defineEmits([&#39;cellTap&#39;]);
const cellRef = ref();
const cellAction = () => {
    emit(&#39;cellTap&#39;, cellRef.value);
}
</script>

Ajouter au sous-composant L'attribut ref est déclaré et une variable cellRef avec le même nom que l'attribut ref est déclarée à ce moment-là, cellRef. .value peut être transmis comme référence dom via émet

Scénarios applicables

Plusieurs pages peuvent avoir des opérations Scène dom du composant

Exemple de code

<template>
    <div ref="cellRef" @click="cellAction">
        <span>{{item}}</span>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;;

const props = defineProps({
    item: Number
})
const emit = defineEmits([&#39;cellTap&#39;]);
const cellRef = ref();
const cellAction = () => {
    emit(&#39;cellTap&#39;, cellRef.value);
}
</script>

<template>
    <div>
        <p>通过子组件emit传递ref</p>
        <div>
            <Cell :item="item" @cellTap="cellTapHandler" v-for="(item, index) in state.list" :key="index">
            </Cell>
        </div>
    </div>
</template>

<script setup>
import { reactive } from &#39;vue&#39;
import Cell from &#39;@/components/Cell.vue&#39;
const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const cellTapHandler = (el: any) => {
    let height = el.style.height ? el.style.height : &#39;20px&#39;;
    height = Number(height.replace(&#39;px&#39;, &#39;&#39;));
    el.style = `height: ${height + 20}px`;
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
    }
}
</style>

[Recommandations du didacticiel vidéo associé :

vuejs tutoriel d'introduction, Démarrer avec le front-end Web

]

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!