vue refs 报错 Property 'getSectionIds' does not exist on type 'Vue | Element | Vue[] | Element[]'.

最新推荐文章于 2023-02-13 15:00:51 发布

Jane_96

最新推荐文章于 2023-02-13 15:00:51 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue Refs

本文链接：https://blog.csdn.net/Jane_96/article/details/103425447

版权

在Vue应用中，当使用refs尝试访问子组件的方法或属性时，可能会遇到类型错误。本文通过一个示例演示了如何通过类型断言来消除'Property 'getSectionIds' does not exist on type 'Vue | Element | Vue[] | Element[].'的错误。介绍了解决该问题的两种类型断言方式，并强调类型断言不是类型转换，误断言不存在的类型会导致编译错误。

摘要由CSDN通过智能技术生成

在父组件中用refs去获取子组件内部的方法或者属性，以下面的demo为例，直接写this.$refs.childRef.getValue() 会报错，报错内容说’Vue | Element | Vue[] | Element[]'a这些类型中，没有我们调用的属性。但是我们很清楚，这个childRef的类型是ChildComponent，这个类型中是含有我们所需要的变量或者方法，因此给this.$refs.childRef添加一个类型断言，告诉编译器，childRef这个值的类型是ChildComponent，这样就不会报错了。

断言的两种写法：(this.$refs.childRef as ChildComponent)或者<ChildComponent>this.$refs.childRef

类型断言即手动指定一个值的类型，类型断言并非是类型转换，断言一个联合类型中不存在的类型会报错！

demo代码：

// 父组件
<template>
  <div>
    <ChildComponent ref="childRef" />
    <div>ChildComponent Value is:  {
  {childValue}}</div>
    <a-button @click="getChildValue">Get ChildComponent Value</a-button>