Vue3 中用 SFC 和 TSX 方式调用子组件函数的方法

在 Vue3 的项目开发中，掌握如何有效地调用子组件函数是一项重要技能，特别是在使用单文件组件（SFC）和 TSX 这两种不同方式时。

先来看 SFC 方式。在 SFC 里，首先要在父组件中通过 ref 来获取子组件的引用。例如，在父组件的模板中，给子组件添加一个 ref 属性，如 <ChildComponent ref="childRef" />，这里的 childRef 是在父组件的 setup 函数中定义的 ref。在 setup 函数内，通过 const childRef = ref(null) 声明 childRef。当需要调用子组件的函数时，就可以使用 childRef.value 来访问子组件实例，进而调用其内部函数。比如子组件有一个 handleChildFunction 函数，那么在父组件中可以这样调用：childRef.value.handleChildFunction()。

而在 TSX 方式中，调用子组件函数有着不同的实现。TSX 结合了 TypeScript 和 JSX 的语法优势。在父组件中定义一个变量来保存子组件的引用。假设子组件是一个类组件，定义如下：

class ChildComponent extends Vue {
  handleChildFunction() {
    console.log('Child function called');
  }
}

在父组件的 TSX 代码中，通过 React.createRef 创建一个引用，如 const childRef = React.createRef<typeof ChildComponent>();。在渲染子组件时，将 ref 传递给子组件，即 <ChildComponent ref={childRef} />。要调用子组件函数时，使用 childRef.current?.handleChildFunction()。这里使用可选链操作符 ?. 是为了避免在 childRef.current 为 null 时出现错误。

无论是 SFC 还是 TSX 方式，关键都在于获取子组件的引用，然后利用该引用调用子组件的函数。合理运用这两种方式，可以根据项目的具体需求和代码结构选择最合适的方案，提升开发效率和代码的可维护性，让 Vue3 项目的组件交互更加流畅和高效。