快捷導(dǎo)航

vue3中使用ref獲取dom的操作代碼

更新時(shí)間：2024年06月27日 08:28:38 作者：扯蛋蛋

ref在我們開(kāi)發(fā)項(xiàng)目當(dāng)中很重要的,在?Vue?中使用?ref?可以提高代碼的可讀性和維護(hù)性,因?yàn)樗苯訕?biāo)識(shí)出了組件中需要操作的具體元素或組件實(shí)例,本文我將給大家?guī)?lái)的是vue3中用ref獲取dom的操作,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下

前言

本期文章我將給大家?guī)?lái)的是vue3中用ref獲取dom的操作，ref在我們開(kāi)發(fā)項(xiàng)目當(dāng)中很重要的，在 Vue 中使用 ref 可以提高代碼的可讀性和維護(hù)性，因?yàn)樗苯訕?biāo)識(shí)出了組件中需要操作的具體元素或組件實(shí)例。這使得團(tuán)隊(duì)合作、代碼審查和后續(xù)功能更新更加高效。總結(jié)來(lái)說(shuō)，ref 在 Vue 中是一個(gè)非常有用的工具，不僅使得操作 DOM 更加方便和直觀，還能夠提升組件間通信的靈活性和效率。正確使用 ref 可以幫助開(kāi)發(fā)者更好地管理和操作 DOM 元素以及組件實(shí)例，從而實(shí)現(xiàn)復(fù)雜的前端交互和 UI 動(dòng)效。接下來(lái)我就一一道來(lái)吧

通過(guò)ref直接拿到dom引用

<template>
  <div class="demo1-container">
      <div ref="sectionRef" class="ref-section">1111111</div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
const sectionRef = ref(null)
onMounted(() => {
  console.log(sectionRef.value)
})

</script>

在這里我們要注意的是當(dāng)在div標(biāo)簽中用 ref="sectionRef"，之后在聲明響應(yīng)式變量的時(shí)候，要用sectionRef命名，這個(gè)是一定要的，然后我們通過(guò) sectionRef.value 的形式即可獲取該div元素。讓我們看看結(jié)果吧

單一dom元素或者個(gè)數(shù)較少的場(chǎng)景

通過(guò)父容器的ref遍歷拿到dom引用

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

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const listRef = ref()
const state = reactive({
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
})
onMounted(()=>{
 console.log(listRef.value)
})
</script>

<style scoped>
.demo2-container {
   width: 200px;
   height: 400px;
   border: 1px solid #000;
   overflow: auto;
}
</style>

通過(guò)對(duì)父元素添加了ref屬性，并聲明了一個(gè)與ref屬性名稱相同的變量listRef，此時(shí)通過(guò)listRef.value會(huì)獲得包含子元素的dom對(duì)象,然后我們就可以此時(shí)通過(guò)listRef.value.children[index]的形式獲取子元素dom

通過(guò):ref將dom引用放到數(shù)組中

<template>
    <div class="demo2-container">
        <div class="list-section">
            <div :ref="setRefAction" @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive ,ref} from 'vue'
const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] 
})
const index = ref(null)
const setRefAction = (el: any) => {
    state.refList.push(el);
}
const higherAction = (index) => {
   console.log(state.refList[index]) 
    
}
onMounted( () => {
    console.log(state.refList);
    setRefAction(index)
})
</script>
<style scoped>
.demo2-container {
    width: 200px;
    height: 400px;
    border: 1px solid #000;
    overflow: auto;
}
.list-item {
  background-color: pink;
  border: 1px solid #000;
}
</style>

這種情況下，我們可以通過(guò)動(dòng)態(tài)設(shè)置ref的形式進(jìn)行設(shè)置ref，這樣我們就可以獲取到一個(gè)ref的數(shù)組，結(jié)果如下