如何解决ts无法识别vue中的$refs

该文章发布于 ,归类于 Javascript

vue中$refs可能会返回一个vue对象或者是Element对象,但是typescript并不知道这是个什么玩意儿,怎么解决这个问题呢?

解决办法是我们手动指定其类型,例如有一个ScrollView.vue组件,我在父组件中引用它。

<template>
  <scroll-view ref="scrollView"></scroll-view>
</template>

如下方式引用即可。

import ScrollView from './path/ScrollView.vue'

(this.$refs.scrollView as ScrollView).someMethod()

如果它不是一个Vue对象,而是一个Element对象的引用的话,可以这样来引用

(this.$refs.drag as HTMLElement).clientWidth

上面是一个办法,还有另一个解决的办法。就是在当前类中声明$refs所有引用。还是以上面例子中的对象为例。

export default class SomeClass extends Vue {
  public $refs!: {
    scrollView: ScrollView
  }
}

按照这个套路,把当前$refs所有可能引用到的都声明一下,再引用,ts就能正确识别了。

相关文章