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

Posted 2023-02-23

【中文标题】使用 vue typescript 铸造组件 - 访问子方法

【英文标题】：Casting a component with vue typescript - accessing child methods

【发布时间】：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
    

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

【参考方案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