类型“从不”上不存在属性“$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>

我得到这个错误Object is possibly 'null' before adding ? 到refRouterView.value? 这看起来像黑客，我不喜欢它。 而且，添加后? 我开始看到此错误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

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

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

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

Answer 2

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

请参考： Vetur bug or code error? “‘SVGelement’类型上不存在属性‘$el’