引用子组件方法的问题

Question

如果想引用子组件的方法，使用ref过程中由于HTMLElement不存在子组件方法会飘红，正常做法是使用interface拓展？

const form = ref<null | HTMLElement>(null)

const submitForm = (event: boolean) => {
   if (!event) {
	  // 飘红 HTMLELement不存在该方法
      form.value && form.value.formClear()
   }
 }

Answer 1

晨曦的希望 2020-09-28 19:22:02

    interface IFormElement {
      formClear: Function;
    }
    const form = ref<null | IFormElement>(null);
    const submitForm = (event: boolean) => {
      if (!event) {        
        form.value && form.value.formClear();
      }
    };

• 提问者 linkscope #1

  非常感谢！

Answer 2

晨曦的希望 2020-09-28 15:02:58

只能使用interface吧，或者你不嫌弃的话给他个any类型

• 提问者 linkscope #1

  但是如何拓展呢
  const form = ref<null | Element extends IFormElement>(null)
  这种泛型拓展eslint会报错 Parsing error: '?' expected

• 晨曦的希望 回复 提问者 linkscope #2

  用接口定义子组件有这个方法就行，没必须继承吧，这个eslint报错应该可以配置

• 晨曦的希望 回复 提问者 linkscope #3

  或者这样写：
  interface IFormElement extends Element {
        formClear: Function;
  }