背景:Tab标签跳转功能 给每个组件都绑定了name
<div class="main" v-if="mainPart" v-memo="[mainPart]">
<DetailSwipe :swipe-data="mainPart.topModule?.housePicture.housePics" />
<DetailInfos name="描述" :ref="getSectionRef" />
<DetailFacility name="设施" :ref="getSectionRef" />
<DetailLandLord name="房东" :ref="getSectionRef" />
<DetailComment name="评论" :ref="getSectionRef" />
<DetailNotice name="须知" :ref="getSectionRef" />
<DetailMap name="地图" :ref="getSectionRef" />
<DetailIntroduce />
</div>
const sectionEls = ref({})
const titles = computed(() => {
return Object.keys(sectionEls.value)
})
const getSectionRef = (value) => {
// sectionEls.push(value.$el)
const name = value.$el.getAttribute("name")
sectionEls.value[name] = value.$el
}
// const getSectionRef = (value) => {
// sectionEls.push(value.$el)
// }
const tabClick = (index) => {
// console.log('----------');
const key = Object.keys(sectionEls.value)[index]
const el = sectionEls.value[key]
let instance = el.offsetTop
if(index !== 0){
instance = instance - 44
}
detailRef.value.scrollTo({
// $el 拿到根元素
top: instance,
behavior:'smooth'
})
**原因:**因为点击返回到首页会卸载组件,也会执行getSectionRef函数,此时导致value值为空 解决办法