Vue+TypeScript组件类型转换 如何便捷访问子组件方法

你尝试的在components选项中强转类型的方案不可行，components选项仅用于注册当前组件依赖的子组件，和$refs的类型推导没有关联。你不需要强制切换到类/装饰器语法，基于Vue.extend的常规Options API写法也可以实现$refs的类型预定义，避免每次调用都手动强转。

方案1：Vue.extend 写法实现类型标注 #

通过类型断言扩展当前组件实例的$refs类型即可，示例代码如下：

import Vue from 'vue'
import SearchInput from './SearchInput.vue'

export default Vue.extend({
  name: 'UserForm',
  components: { SearchInput },
  methods: {
    handleReset() {
      // 此处调用无需手动强转，自带类型校验和提示
      this.$refs.searchInput.reset()
    }
  }
// 扩展实例的$refs类型
} as Vue & {
  $refs: {
    // 如果ref绑定的是原生form元素，使用HTMLFormElement类型
    searchInput: HTMLFormElement
    // 如果ref绑定的是SearchInput子组件，替换为下方类型即可
    // searchInput: InstanceType<typeof SearchInput>
  }
})

方案2：类/装饰器语法实现（更简洁） #

如果你愿意使用vue-property-decorator的类组件写法，可以通过@Ref装饰器更简洁地完成类型标注：

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

@Component({
  components: { SearchInput }
})
export default class UserForm extends Vue {
  // 原生DOM元素类型标注
  @Ref() readonly searchInput!: HTMLFormElement
  // 子组件实例类型标注写法
  // @Ref() readonly searchInput!: InstanceType<typeof SearchInput>

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

内容的提问来源于stack exchange，提问作者TommyD