Vue3 SFC和TSX如何调用子组件函数？

本文共计933个文字，预计阅读时间需要4分钟。

目录 + 1 + 组件暴露方法 + 1.1 + SFC（.vue）暴露方法 + 1.2 + TSX（.tsx）暴露方法 + 暴露方法 + 2 + 父组件调用子组件方法 + 2.1 + SFC（.vue）调用 + 2.2 + TSX（.tsx）调用 + 在开发中会遇到这样的需求：获取子组件的引用，

目录

• 1 子组件暴露方法
• 1.1 SFC（.vue）暴露方法
• 1.2 TSX（.tsx）暴露方法
• 2 父组件调用子组件中的方法
• 2.1 SFC（.vue）调用
• 2.2 TSX（.tsx）调用

在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴露的方法。

1 子组件暴露方法

1.1 SFC（.vue）暴露方法

在使用.vue定义的组件中，setup中提供了defineExpose()方法，该方法可以将组件内部的方法暴露给父组件。