属性"$el"在类型"从不"上不存在

Question

我正在做一个vue.js 3项目，我需要通过最初声明像这样的null引用来引用/获取脚本中的div元素const refRouterView = ref(null)，我不确定如何让 TypeScript 意识到DomElement。

标记已更新

<template lang="pug">
.flex
router-view(ref='refRouterView')
...
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const refRouterView = ref(null);
const routerViewHeight = ref(500);
const getRouterViewHeight = () => {
setTimeout(() => {
routerViewHeight.value = refRouterView.value?.$el.offsetHeight;
}, 250);
};
onMounted(() => getRouterViewHeight());
</script>

在将?添加到refRouterView.value?之前，我Object is possibly 'null'收到此错误，这似乎是黑客，我不喜欢它。而且，添加?后，我开始看到此错误Property '$el' does not exist on type 'never'.

我尝试将HTMLElement添加到const refRouterView : HTMLElement = ref(null);但是这引入了此错误Property 'value' does not exist on type 'HTMLElement'.即使将?添加到refRouterView.value?后仍未解决

请帮忙！

更多信息

最初我的问题使用的是div(ref='refRouterView')，@Thomas的答案解决了它，但我使用的是router-view.只是为了让我的问题易于理解，我提到了div而不是router-view，这让我们感到困惑，因此答案并没有解决我的问题。

<template lang="pug">
.flex
div(ref='refRouterView')
...
</template>

Answer 1

如果你refDOM 节点，你没有$el属性，ref 直接指向 DOM 节点：
https://v3.vuejs.org/guide/composition-api-template-refs.html

对于打字稿部分，您必须像这样定义类型，因为refRouterView是某种类型的Proxy：
const refRouterView = ref<HTMLDivElement>();

然后你可以直接访问属性：
refRouterView.value.offsetHeight

Answer 2

(this.$refs.refRouterView as Vue & { $el: () => any }).$el.offsetHeight

请参考： Vetur错误或代码错误？"类型'SVG元素'上不存在属性'$el'

Answer 3

const refRouterView= ref(null)