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