vue3中通過ref獲取元素節(jié)點的實現(xiàn)
更新時間：2022年07月28日 09:48:38 作者：抱小熊睡覺
這篇文章主要介紹了vue3中通過ref獲取元素節(jié)點的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
通過ref獲取元素節(jié)點
ref 在vue2中可以說簡化js原生的document.getElementById("#id")操作 。當(dāng)然在vue3中也一樣
首先，給你想獲取到的元素一個ref 屬性
然后，再將這個ref對象創(chuàng)建出來，就可以訪問到他的值
但是。這樣在setup 里邊可以訪問，但是直接打印出來的值為null........
由于 setup 函數(shù)的執(zhí)行時間要先于 html 標(biāo)簽的渲染，所以我們不能直接在 setup 函數(shù)中初始化 box 標(biāo)簽。
在生命周期函數(shù)中 setup 函數(shù)在 beforeCreate 和 Created 之間執(zhí)行
如果存在有初始化或類似的操作，需要借用 生命周期函數(shù)中的onMounted
這樣就可以訪問到了
獲取ref元素的幾種方式小結(jié)
1. 原生js獲取dom元素
document.querySelector(選擇器) document.getElementById(id選擇器) document.getElementsByClassName(class選擇器)
2. ref獲取單個dom元素
<template>
? ?<div ref='divDom'></div>?
</template>
<script setup>
import { ref} from 'vue'
const divDom = ref(null);
onMounted(()=>{
? ? console.log('獲取dom元素',divDom)
})3. ref獲取v-for循環(huán)中的dom元素
<template>
? ?<div ref='getDivDom' v-for="item in list" :data-id="item.id"></div>?
</template>
<script setup>
import { ref} from 'vue'
const divDomList = ref(new Map());
const getDivDom = el=>{
? ? if(el){
? ? ? ? divDomList.set(el.dataset['id'],el)?
? ? }
}
// const el =divDomList.get(id) // 根據(jù)list數(shù)據(jù)中的id值 獲取對應(yīng)的dom元素?4. 在swiper中獲取swiper的dom元素
<template>
? ?<swiper @swiper='getSwiper'></swiper >?
</template>
<script setup>
import swiper from 'swiper'
import { ref} from 'vue'
const swiperDom= ref(null);
const getSwiper= el=>{
? ? swiperDom.value = el;
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
Vue elementui字體圖標(biāo)顯示問題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項目多環(huán)境配置的實現(xiàn)，感興趣的可以了解一下2021-07-07
本篇文章主要介紹了vue服務(wù)端渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue業(yè)務(wù)實例之組件遞歸及其應(yīng)用
目中出現(xiàn)多級菜單時,需要多層for循環(huán)時,但是當(dāng)菜單增加層級時,需要在頁面結(jié)構(gòu)中增加一層for循環(huán),這時我們可以使用組件遞歸的思想來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue業(yè)務(wù)實例之組件遞歸及其應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-05-05
使用axios請求時,發(fā)送formData請求的示例
今天小編就為大家分享一篇使用axios請求時,發(fā)送formData請求的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)
通過100行代碼幫助大家理解和分析vue2.0響應(yīng)式架構(gòu)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue實例初始化為渲染函數(shù)設(shè)置檢查源碼剖析
這篇文章主要為大家介紹了Vue實例初始化為渲染函數(shù)設(shè)置檢查源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue3的vue-router超詳細(xì)使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12