“从不”类型上不存在属性“$el”答案

【问题标题】：Property '$el' does not exist on type 'never'“从不”类型上不存在属性“$el”
【发布时间】：2021-12-30 01:05:33
【问题描述】：

我正在处理 vue.js 3 项目，我需要通过最初声明像这样的 null 引用 const refRouterView = ref(null) 来在我的脚本中引用/获取 div 元素，但我不确定如何制作 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'，这看起来像是hack，我不喜欢它。而且，在添加? 之后，我开始看到这个错误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>

【问题讨论】：

标签： javascript typescript vue.js vuejs3

【解决方案1】：

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

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

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

【讨论】：

感谢您的帮助，我知道 $el 在 <HTMLDivElement> 中不存在，它是 vue.js 的东西。仅供参考，正如预期的那样const refRouterView = ref<HTMLDivElement>(); 没有解决问题，我们收到此错误Property '$el' does not exist on type 'HTMLDivElement'. 如果您对如何解决我的问题有任何建议，请告诉我。
@Syed $el 在 Vue 3 中不存在 DOM refs 值已经是 DOM 节点。我更新了答案以反映那部分。
对不起！但这不是真的。这是 console.log ......refRouterView.value.offsetHeight :>> undefined ......refRouterView.value.$el.offsetHeight :>> 408 ......如果我遗漏了什么，请告诉我。
现在我很困惑，之前你提到你得到Property '$el' does not exist on type 'HTMLDivElement'的错误，现在它返回预期值？看来我在这里也遗漏了一些东西，我不知道pug 模板，也许那里有所不同，但是如果您检查我的答案中的链接，那也是我所描述的...
对不起！为了让您感到困惑-这是我的错误-当我使用div但我使用router-view时，您的答案解决了我的问题。只是为了让我的问题易于理解，我提到了div(ref='refRouterView') 而不是router-view(ref='refRouterView')，这让我们感到困惑。我赞成您的回答，但很抱歉无法将其标记为答案 :( 我已经更新了我的问题。