vue中this.$refs.name.offsetHeight獲取不到值問(wèn)題
vue this.$refs.name.offsetHeight獲取不到值
通過(guò) vue 動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度 中的需求，固定高度如果是一個(gè)組件（組件里使用 v-if ）時(shí)，我們無(wú)法通過(guò)之前的方式（this.$refs.name.offsetHeight）獲取到數(shù)據(jù)，那我們?cè)趺崔k呢？
<template>
? <div class="introduce" v-if="JSON.stringify(entryObj) !== '{}'">
? ? ...
? </div>
</template>此刻我們可以在子組件mounted鉤子中使用 nextTick，傳遞給父組件。
this.$nextTick(() => { //使用nextTick為了保證dom元素都已經(jīng)渲染完畢?
? this.$emit('eventGetHeight',this.$el.offsetHeight);
});父組件中監(jiān)聽(tīng)eventGetHeight事件，并取得這個(gè)數(shù)據(jù)。
<introduce? ? :entryObj="intrObj"? ? v-show="!dialogShow"? ? @openDialog="open"? ? @eventGetHeight="getHeight"? ? ref="intr" ></introduce>
獲取到屏幕高度和固定高度后，我們可以計(jì)算出內(nèi)容區(qū)域滾動(dòng)高度了。
getHeight(data){
? let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
? this.scrollHeight = (clientHeight - data) +'px'
},只需在內(nèi)容區(qū)域動(dòng)態(tài)設(shè)置屬性即可實(shí)現(xiàn)。
<div style="overflow-x: hidden; overflow-y: scroll;" :style="{ height: scrollHeight }">
? ...
</div>注意：調(diào)用的組件和 v-if 結(jié)合使用，且組件的數(shù)據(jù)是動(dòng)態(tài)的，即高度也是動(dòng)態(tài)的。
ref不是響應(yīng)式的，所有的動(dòng)態(tài)加載的模板更新它都無(wú)法相應(yīng)的變化。
通過(guò)渲染子組件成功之后（即獲取到動(dòng)態(tài)數(shù)據(jù)），傳遞給父組件，再進(jìn)行計(jì)算滾動(dòng)區(qū)域。
vue中ref的使用（this.$refs獲取為空）
但是有個(gè)辦法，我們可以使用
this.$nextTick(() => {
? ? // todo
})
setTimeout(() => {
? ? // todo
}, 0)來(lái)得到數(shù)據(jù)
ref
- 本身作為渲染結(jié)果被創(chuàng)建，在初始渲染的時(shí)候不能訪問(wèn)他們，是不存在的
- $refs不是響應(yīng)式的，只在組件渲染完成后才填充
- 用于元素或子組件注冊(cè)引用信息，注冊(cè)完成，將會(huì)注冊(cè)在父組件$refs對(duì)象上
如果你獲取到的總是空的，你注意一下
1、你在哪里調(diào)用，和你調(diào)用的對(duì)象
- 試試在mounted（）里面調(diào)用有效果沒(méi)有
- 調(diào)用的對(duì)象是本來(lái)就存在的，還是需要數(shù)據(jù)渲染之后才會(huì)出現(xiàn)的，同理，在mounted（）里面調(diào)用看看
2、調(diào)用對(duì)象是不是數(shù)組列表
- 我一開(kāi)始設(shè)置ref在v-for列表上，直接獲取this.$refs.name.style，永遠(yuǎn)是空的，
- 后來(lái)才發(fā)現(xiàn)，this.$refs.name是一個(gè)數(shù)組，無(wú)法通過(guò) .style 獲取樣式，
- 只能遍歷這個(gè)this.$refs.name數(shù)組，在this.$refs.name[index]上設(shè)置樣式
// 更新，這個(gè)說(shuō)法有點(diǎn)問(wèn)題
但是像高度寬度，可以通過(guò)offsetHeight，等來(lái)獲取。
3、調(diào)用對(duì)象是否和v-if結(jié)合使用
- ref不是響應(yīng)式的，所有的動(dòng)態(tài)加載的模板更新它都無(wú)法相應(yīng)的變化。
最后
在使用中，我發(fā)現(xiàn)$refs.style只能設(shè)置該對(duì)象的樣式，獲取出來(lái)的值都是空的
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE組件的計(jì)算屬性詳解，使用計(jì)算機(jī)屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)，應(yīng)當(dāng)使用計(jì)算機(jī)屬性，除非你不希望得到緩存，下文來(lái)了解具體詳情2022-06-06
Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法
封裝一個(gè)組件時(shí),我使用到了v-for和v-if,它們?cè)谕粯?biāo)簽內(nèi),總是提示v-for循環(huán)出來(lái)的item在實(shí)例中沒(méi)有被定義,查詢資料后原因是因?yàn)関-for和v-if在同級(jí)使用時(shí),v-if優(yōu)先級(jí)比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法2024-07-07
vue項(xiàng)目使用node連接數(shù)據(jù)庫(kù)的方法(前后端分離)
這篇文章主要介紹了vue項(xiàng)目使用node連接數(shù)據(jù)庫(kù)（前后端分離），本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
教你三分鐘掌握Vue過(guò)濾器filters及時(shí)間戳轉(zhuǎn)換
這篇文章教你三分鐘掌握Vue過(guò)濾器filters及時(shí)間戳轉(zhuǎn)換,本文將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法,需要的朋友可以參考下2023-03-03
本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)，感興趣的朋友跟隨小編一起看看吧2019-05-05
在Vue2中,由于數(shù)據(jù)響應(yīng)式是利用object.definedProperty()實(shí)現(xiàn)的,無(wú)法深層監(jiān)聽(tīng)數(shù)據(jù)變化,因此提供了$set方法來(lái)解決數(shù)據(jù)變化視圖未實(shí)時(shí)更新的問(wèn)題,然而,在Vue3中,數(shù)據(jù)響應(yīng)式使用ES6的proxy進(jìn)行數(shù)據(jù)代理,因此廢棄了$set的概念2024-10-10
vue中跨域以及sessionId不一致問(wèn)題及解決
這篇文章主要介紹了vue中跨域以及sessionId不一致問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue開(kāi)發(fā)中如何在js文件里使用pinia和組件同步
在JavaScript文件中封裝涉及到使用Pinia的方法時(shí),發(fā)現(xiàn)Pinia和組件內(nèi)容并不同步,二者的狀態(tài)是獨(dú)立的,解決辦法是,在新建對(duì)象的時(shí)候,將Pinia作為參數(shù)傳入,本文給大家介紹vue開(kāi)發(fā)中如何在js文件里使用pinia和組件同步,感興趣的朋友一起看看吧2024-10-10
vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07