使用 vue typescript 转换组件 - 访问子方法

Question

我正在尝试访问子组件方法。通常这样就可以了

 this.$refs.searchInput.reset()

为了让 typescript 满意，这是必需的。

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

我不太喜欢语法。有没有办法在组件选项中投射

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

我应该使用 class/decorator 语法来实现吗？

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()
  }
}

或者，您可以使用组合 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

使用 vue typescript 转换组件 - 访问子方法

Casting a component with vue typescript - accessing child methods

typescript

vue.js

typescript-decorator

vue-class-components