Vue中的打字稿-类型'Vue |中没有属性'validate' 元素| Vue [] | 元件[]'。

解决方案：

简单：

(this.$refs.form as Vue & { validate: () => boolean }).validate()

替代方法（如果this.$refs.form在组件中多次引用，请使用此方法）：

computed: {
  form(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }
} // Use it like so: this.form.validate()

可重用（如果v-form在整个应用程序中多次使用该组件，请使用此函数）：

// In a TS file
export type VForm = Vue & { validate: () => boolean }

// In component, import `VForm`
computed: {
  form(): VForm {
    return this.$refs.form as VForm
  }
}

说明：

在Vue模板语法中，我们可以ref在Vue实例或DOM元素上使用属性。如果ref在v-for循环中使用if ，Vue则检索实例或DOM元素的数组。

这就是为什么this.$refs要么返回Vue | Element | Vue[] | Element[]。

为了TypeScript知道正在使用哪种类型，我们需要强制转换值。

我们可以做：

(this.$refs.form as Vue).validate() 要么 (<Vue>this.$refs.form).validate()

我们将其强制转换为Vue因为v-form是Vue实例（组件）而不是Element。

我个人的喜好是创建一个计算属性，该属性返回Vue已强制转换的实例或DOM元素。

即。

computed: {
  form(): Vue {
    return this.$refs.form as Vue
  }
}

该v-form实例具有一个validate返回布尔值的方法，因此我们需要使用交集类型文字：

computed: {
  form(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }
}

然后我们可以像这样使用它： this.form.validate()

更好的解决方案是创建一个带有交集的类型，以便可以在多个组件之间重用它。

export type VForm = Vue & { validate: () => boolean }

然后将其导入组件中：

computed: {
  form(): VForm {
    return this.$refs.form as VForm
  }
}