<> Problem scenario :

use iview Management system after framework development , Need to use form Form function , The final form code is :
this.$refs.form.validate(......)
But the code reported an error :
Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property'validate' does not exist on type 'Vue'
Because for the first time TS It's also very confusing , Looking up the Internet, the general idea is validate() Not at all Vue How to do it , It's the method of one of your components . So you need to
this.$refs[formName] Explicitly annotate as that component type ; The main problem is that this.$ref ad locum , stay vue We will use the
this.$refs To access a specific instance , It will return a vue Object or Element object , But here it is TS I didn't know it was inaccessible .

<> terms of settlement :

since TS hear nothing of this.$refs What is it? , So we need to add a type assertion to it , Tell me what it is , That is, we need to this.$refs[formName]
Explicitly mark as your component type ;
Method 1 :
this.$refs.form.validate() Become (this.$refs.form as Vue &
{validate:Function}).validate() Let me tell you TS compiler this.$refs.form belong to VUE Type has both validate
method ; It's about TS Type assertion for as And cross type &
Tips1:( The representation of cross type is Type1 & Type2, The result is to take the union of the two types and have all the properties of the members of the two types .)
Tips2:( The representation of a union type is Type1 | Type2, The result is one of these two types , Only common properties of all types can be accessed .)
Method 2 :
adopt vue-property-decorator The ornaments provided to us will be used once and for all refs Add to computed Property
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 }
Equivalent to
export default { computed() { form: { cache: false, get() { return this.$refs.
formas Form } }, } }
Method 3 :
Simply and rudely declare directly in the class refs
import Form from '@/path/to/another-component.vue' export default class
SomeClass extends Vue { public $refs!: { form: Form } }
<> end !

Technology
©2019-2020 Toolsou All rights reserved,
( Super detail )Eclipse Using tutorials —— use Eclipse Create first HelloWorld! Database operation 5 code implementation mysql Addition, deletion, modification and query of database What can MCU do , Do you have any interesting works made by MCU or open source hardware Go to the interview after reading this , Steady over ~~ Single linked list of primary data structure (C Language implementation )SQL Comprehensive questions Employee unit comprehensive questions Python Implementation of Hanoi Tower code VHDL——JK trigger It's over , Starting salary 30k