這次為大家帶來怎樣實現Vue中mounted鉤子函數獲取節點高度，實現Vue中mounted鉤子函數獲取節點高度的注意事項有哪些，下面就是實戰案例，一起來看一下。
遇到的問題
最近在開發一個Vue的項目，好幾個頁面都有用到一個頁面樓層滑動的組件，我就直接封裝成了一個，但遇到一個bug，就是我需要得到這個元件的offsetTop，然後頁面捲動到這個位置的時候，就設定position屬性為fixed，讓他固定在螢幕上。問題是當我在mounted鉤子函數中獲取offsetTop的時候，在新開的頁簽中打開頁面，會得到錯誤的offsetTop，但是在當前頁面刷新，就不會有問題。
定位問題
後來查到問題，就是載入的問題，新視窗開啟圖片，預設是沒有帶快取的，圖片是GET請求，是異步的，js運行的肯定比圖片GET要快，所以當執行mounted鉤子函數的時候，圖片還沒有全部加載完，這時候就會得到一個錯誤的offsetTop。
解決方案
給圖片加上ref屬性，並在那個元件裡的mounted鉤子函數中寫，
this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}這裡的Bus是用的EventBus，兩個元件中事件回應的方法，不懂或感興趣的可以點這裡EventBus。
需要得到offsetTop的組件裡面
Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop
})相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是怎樣實作Vue中mounted鉤子函數取得節點高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
