碰到的題目

最近在開闢一個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  
})

這時刻就能夠確認每次不管是頁面新翻開照樣當前頁革新都能夠獲得準確的offsetTop。