使用 vue typescript 铸造组件 - 访问子方法答案

【问题标题】：Casting a component with vue typescript - accessing child methods使用 vue typescript 铸造组件 - 访问子方法
【发布时间】：2021-10-20 03:39:16
【问题描述】：

我正在尝试访问子组件方法。通常这很好

 this.$refs.searchInput.reset()

为了让打字稿满意，这是必需的。

(this.$refs.searchInput as HTMLFormElement).reset()

我对语法并不太热衷。有没有办法在组件选项中强制转换

export default Vue.extend({
  name: 'UserForm',
  components: {
       SearchInput as HTMLFORMELEMENT
    }

我应该为此使用类/装饰器语法吗？

【问题讨论】：

标签： typescript vue.js typescript-decorator vue-class-components

【解决方案1】：

没有官方方法可以在组件选项中声明$refs 的类型。

确实，您似乎可以通过使用vue-class-component 来避免类型断言：

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class UserForm extends Vue {
  $refs!: {
    searchInput: HTMLFormElement
  }

  mounted() {
    this.$refs.searchInput.reset()
  }
}

或vue-property-decorator:

import { Vue, Component, Ref } from 'vue-property-decorator'

@Component
export default class UserForm extends Vue {
  @Ref() readonly searchInput!: HTMLFormElement

  mounted() {
    this.searchInput.reset()
  }
}

或者，您可以使用 Composition API，为 template ref 声明类型：

import { defineComponent, ref, onMounted } from 'vue' // or `@vue/composition-api` for Vue 2

export default defineComponent({
  setup() {
    const searchInput = ref<HTMLFormElement>()

    onMounted(() => searchInput.value?.reset())

    return { searchInput }
  }
})

demo

【讨论】：