vue3中通過(guò)ref獲取元素節(jié)點(diǎn)的實(shí)現(xiàn)
通過(guò)ref獲取元素節(jié)點(diǎn)
ref 在vue2中可以說(shuō)簡(jiǎn)化js原生的document.getElementById("#id")操作 。當(dāng)然在vue3中也一樣
首先，給你想獲取到的元素一個(gè)ref 屬性
然后，再將這個(gè)ref對(duì)象創(chuàng)建出來(lái)，就可以訪問(wèn)到他的值
但是。這樣在setup 里邊可以訪問(wèn)，但是直接打印出來(lái)的值為null........
由于 setup 函數(shù)的執(zhí)行時(shí)間要先于 html 標(biāo)簽的渲染，所以我們不能直接在 setup 函數(shù)中初始化 box 標(biāo)簽。
在生命周期函數(shù)中 setup 函數(shù)在 beforeCreate 和 Created 之間執(zhí)行
如果存在有初始化或類(lèi)似的操作，需要借用 生命周期函數(shù)中的onMounted
這樣就可以訪問(wèn)到了
獲取ref元素的幾種方式小結(jié)
1. 原生js獲取dom元素
document.querySelector(選擇器) document.getElementById(id選擇器) document.getElementsByClassName(class選擇器)
2. ref獲取單個(gè)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值 獲取對(duì)應(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;
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue如何進(jìn)行分布式事務(wù)管理以及解決方案
在分布式系統(tǒng)中，事務(wù)管理是一個(gè)非常重要的問(wèn)題，所以本文將介紹一下Vue中如何進(jìn)行分布式事務(wù)管理以及分布式事務(wù)解決方案，希望對(duì)大家有所幫助2023-06-06
VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時(shí)使用默認(rèn)的size無(wú)法滿(mǎn)足我們的需求時(shí),我們可以自定義字體的大小,但是直接重寫(xiě)樣式后,并沒(méi)有起作用,甚至使用::v-deep深度選擇器也沒(méi)有效果,本文介紹VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了淺談Vue.use的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟，詳細(xì)的介紹了兩種調(diào)試vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
如何在Vue項(xiàng)目中應(yīng)用TypeScript類(lèi)
與如何在React項(xiàng)目中應(yīng)用TypeScript類(lèi)類(lèi)似在VUE項(xiàng)目中應(yīng)用typescript，我們需要引入一個(gè)庫(kù)vue-property-decorator，需要的小伙伴可續(xù)看下文具體介紹2021-09-09
Element-ui?Layout布局(Row和Col組件)的實(shí)現(xiàn)
我們?cè)趯?shí)際開(kāi)發(fā)中遇到一些布局的時(shí)候會(huì)用到Layout布局，本文就詳細(xì)的介紹了Element-ui?Layout布局(Row和Col組件)的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2021-12-12
vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法
這篇文章主要為大家詳細(xì)介紹了vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue3.0+vant3.0快速搭建項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了vue3.0+vant3.0快速搭建項(xiàng)目的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例
很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng)，即省市區(qū)三級(jí)聯(lián)動(dòng)，這篇文章主要介紹了Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例，感興趣的小伙伴們可以參考一下2018-06-06