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

最新推荐文章于 2024-03-03 16:31:45 发布

原创最新推荐文章于 2024-03-03 16:31:45 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue Refs

Vue 专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在父组件中用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>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ChildComponent from '@/components/HelloWorld.vue';

@Component({
  components: {
    ChildComponent,
  },
})
export default class Test extends Vue {
  public childValue: number = -1;
  public getChildValue(): void {
    // 写法一
    this.childValue = (this.$refs.childRef as ChildComponent).getValue();
    // 写法二
    // this.childValue = (<ChildComponent>this.$refs.childRef).getValue();
  }
}
</script> 

// 子组件：

<template>
  <div>{{value}}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class ChildComponent extends Vue {
  public value: number = 1;
  public getValue(): number {
    return this.value;
  }
}
</script>