在vue中,使用this.$refs.myDiv.offsetHeight获取组件高度,结果却报错,是因为...
问题描述
想要获取一个元素的高度,它的高度是不固定的,每次调用接口数据后都要重新获取它的高度,根据它的高度去变更页面中另一个元素的高度。
模板文件
<search-list ref="searchListRef" :code="currentRelation ? currentRelation.value : 1" :data="tableData" @selectRow="handleSelectRow" @gotoDetail="gotoDetail" />
脚本文件
mounted () {this.$nextTick(() => {const maxHeight = this.$refs.searchListRef.clientHeight;const winHeight = document.body.clientHeightthis.maxHeight = maxHeight > winHeight ? maxHeight : winHeight})
}
代码没有按照预期的那样运行,报错了,this.$refs.searchListRef.clientHeight
报错了
报错原因分析
经过一番错误分析,发现this.$refs
访问到的是searchList
这个组件,并不是他的根元素,因为我是在组件上绑定的ref
,如果把ref
直接绑定在div
上是可以获取到dom
的。
<div ref="myDiv">Hello Vue!</div>
methods: {accessDOM() {const myDivElement = this.$refs.myDiv;console.log(myDivElement); // 输出 DOM 节点}}
这种情况是可以访问到dom
的。
解决方案
如果要在组件上绑定ref
,可以使用下面两种方案获取到dom
的值。
给组件绑定id
,直接用getElementById
获取dom
模板文件
<search-list ref="searchListRef" id="searchList" :code="currentRelation ? currentRelation.value : 1" :data="tableData" @selectRow="handleSelectRow" @gotoDetail="gotoDetail" />
脚本文件
mounted () {this.$nextTick(() => {const maxHeight = document.getElementById('searchList').clientHeight;;const winHeight = document.body.clientHeightthis.maxHeight = maxHeight > winHeight ? maxHeight : winHeight})
}
利用子组件的ref
子组件(ChildComponent.vue)
<template><div ref="componentRoot"><!-- 组件内容 --></div>
</template><script>
export default {name: 'ChildComponent',methods: {getHeight() {return this.$refs.componentRoot.clientHeight;},},
};
</script>
父组件(ParentComponent.vue)
<template><div><child-component ref="childComponent"></child-component><button @click="logHeight">Log Height</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {logHeight() {const height = this.$refs.childComponent.getHeight();console.log('The height of the child component is:', height, 'px');},},
};
</script>