vue3 ts ref 获取dom元素提示报错具体代码类型“HTMLElement”上不存在属性“$el”，说明识别不

具体代码


const HeaderRef = ref<HTMLElement | null>(null);
const headHeight = HeaderRef.value.$el.clientHeight;

类型“HTMLElement”上不存在属性“ $el”，说明识别不了$ el

思考

----查询半天找不到解决办法---
强行思考
发现：引用类型不对，HTMLElement 获取不到$el属性，是因为这个方法是vue定义的

解决

查询官网

如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 ComponentPublicInstance。这只会包含所有组件都共享的属性，比如 $el

import { ref } from 'vue' 
import type { ComponentPublicInstance } from 'vue' 
const child = ref<ComponentPublicInstance | null>(null)

代码修改

import type { ComponentPublicInstance } from "vue";
const HeaderRef = ref<ComponentPublicInstance | null>(null);
const headHeight = HeaderRef.value.$el.clientHeight;