关于Vue3+ts父组件调用子组件方法

Vue3中通过ref进行元素绑定然后就可以获取到元素，这个不用多说，但是我们需要通过父组件调用子组件的时候还需要进行一定的配置

参考：https://juejin.cn/post/7025985645877133348

先将子组件方法导出

我们需要在子组件中先通过defineExpose方法将父组件需要调用的方法进行导出，如此才能将该方法挂载到子组件实例上

defineExpose({ clearAllErrors })

通过TS进行定义声明

如果使用了ts，我们需要在定义的时候通过InstanceType<typeof 子组件>的形式进行定义子组件的实例，不过这种方式会在npm run build的时候报错

而如果真的想要使用InstanceType进行声明，从而获取代码提示，可以参考下面的解决方案

const filterTable = ref<null | InstanceType<typeof FilterTable>>(null)

InstanceType声明后npm run build报错及解决方案

后来发现通过这个进行方式引入之后，在进行npm run build的时候会报错，找不到相关的属性或者方法，网上找了很久也是没有见到好的解决方案，不过在github中看到了解决方案，不过我感觉并不是太理想
github中的解决方案：https://github.com/vuejs/core/issues/4397#issuecomment-986559117

也是受到github中解决方案的启发，我最终通过下面的方式进行配置

1. 首先，我们在子组件中声明一个接口并导出，接口中包含要声明的各个属性和方法

   export interface IClearExposed {
     clearAllErrors: () => void 
   }
   

2. 然后我们在使用defineExpose的时候通过泛型的方式进行传入（这一步可以省略）

   defineExpose<IClearExposed >({
     clearAllErrors
   })
   

3. 最后在要使用该组件的文件中进行导入该声明，并与InstanceType进行联合使用，这样既能获得代码提示，npm run build的时候也不会再报错了

   import filterTable, { IClearExposed } from './filterTable.vue'
   // 注意该处使用 & 进行类型合并
   const filterTable = ref<null | InstanceType<typeof FilterTable> & IClearExposed>(null)