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)
    
Logo

前往低代码交流专区

更多推荐