<>问题场景:

用iview框架开发后管系统,需要用到form表单功能,最后提交表单代码是:
this.$refs.form.validate(......)
但是代码报错:
Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property'validate' does not exist on type 'Vue'
因为第一次用TS也是很蒙,查找了网上大概思路就是validate() 并不是 Vue 的方法,而是你某个组件的方法。所以你需要把
this.$refs[formName] 显式标注为那个组件类型;主要问题就是出现在this.$ref在这里,在 vue 开发过程中我们会使用
this.$refs去访问某一个具体实例的方法,它会返回一个vue对象或者是Element对象,但是这在 TS并不知道它是所以访问不到的。

<>解决办法:

既然TS不知道this.$refs是什么,那么我们需要给它加上类型断言,告诉它是什么,也就是需要把 this.$refs[formName]
显式标注为你的那个组件类型;
方法一:
this.$refs.form.validate()变为(this.$refs.form as Vue &
{validate:Function}).validate()来告诉 TS编译器this.$refs.form属于VUE类型同时具有validate
方法;这里涉及到TS的类型断言as和交叉类型&
Tips1:(交叉类型的表示方法为 Type1 & Type2,结果是取这两个类型的并集拥有两个类型成员的所有属性。)
Tips2:(联合类型的表示方法为 Type1 | Type2,结果是这两个类型中的某一个,只能访问所有类型的共有属性。)
方法二:
通过vue-property-decorator提供给我们的装饰器一劳永逸的将该refs添加到computed属性上
import { Vue, Component, Ref } from 'vue-property-decorator' import Form from
'@/path/to/another-component.vue' @Component export default class YourComponent
extends Vue { @Ref() readonly form!: Form }
等同于
export default { computed() { form: { cache: false, get() { return this.$refs.
formas Form } }, } }
方法三:
简单粗暴直接在类里面声明refs
import Form from '@/path/to/another-component.vue' export default class
SomeClass extends Vue { public $refs!: { form: Form } }
<>结束!

技术
©2019-2020 Toolsou All rights reserved,
python中delete怎么用_python中如何使用np.delete()方法?大厂Java岗春招必看:论一个面渣逆袭之路上必学得那些知识点3 4j不是合法的python表达式_3+4j不是合法的Python表达式。SQL综合题 员工单位综合题pyqt按钮调用python程序_PyQt:链接按钮到程序中的函数找出游戏的获胜者(java)看完这个去面试,稳过~~将硬盘转换成GPT分区格式python常用内置函数C语言(猜数字小游戏)