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ù)），傳遞給父組件，再進行計算滾動區(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，永遠是空的，
• 后來才發(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論