关于Vue3+ts父组件调用子组件方法
Vue3中通过ref进行元素绑定然后就可以获取到元素,这个不用多说,但是我们需要通过父组件调用子组件的时候还需要进行一定的配置参考:https://juejin.cn/post/7025985645877133348先将子组件方法导出我们需要在子组件中先通过defineExpose方法将父组件需要调用的方法进行导出,如此才能将该方法挂载到子组件实例上defineExpose({ clearAllE
·
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中解决方案的启发,我最终通过下面的方式进行配置
- 首先,我们在子组件中声明一个接口并导出,接口中包含要声明的各个属性和方法
export interface IClearExposed { clearAllErrors: () => void }
- 然后我们在使用defineExpose的时候通过泛型的方式进行传入(这一步可以省略)
defineExpose<IClearExposed >({ clearAllErrors })
- 最后在要使用该组件的文件中进行导入该声明,并与InstanceType进行联合使用,这样既能获得代码提示,
npm run build
的时候也不会再报错了import filterTable, { IClearExposed } from './filterTable.vue' // 注意该处使用 & 进行类型合并 const filterTable = ref<null | InstanceType<typeof FilterTable> & IClearExposed>(null)
更多推荐
已为社区贡献19条内容
所有评论(0)