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

Question

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

 this.$refs.searchInput.reset()

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

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

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

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

我应该为此使用类/装饰器语法来实现这一点吗？

Answer 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，声明模板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 }
  }
})

演示