怎么使用Vue3 SFC和TSX方式调用子组件中的函数

今天小编给大家分享一下怎么使用vue3 SFC和TSX方式调用子组件中的函数的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

1 子组件暴露方法

1.1 SFC（.Vue）暴露方法

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

创建子组件 demo-component-sfc.vue：

<template>  <el-button type="primary" @click="demoFun('child')">demo component sfc</el-button></template><script lang="ts" setup name="demo-component-sfc">const demoFun = (str: string) => {  console.log('demo component sfc', str)}// 使用 defineExpose 暴露组件内部的方法defineExpose({ demoFun })</script>

1.2 TSX（.tsx）暴露方法

使用 .tsx 方式定义的组件，也是通过参数 context 中的 expose() 方法暴露组件内容的方法。

创建子组件 demo-component-tsx.tsx：

import { defineComponent } from 'vue'export default defineComponent({  name: 'demo-component-tsx',  setup (props, context) {    const demoFun = (str: string) => {      console.log('demo component tsx', str)    }    // 使用 expose 暴露组件内部的方法    context.expose({ demoFun })    return () => (      <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button>    )  }})

2 父组件调用子组件中的方法

2.1 SFC（.vue）调用

在 .vue 文件中获取组件引用首先定义一个 ref 变量，然后为子组件设置 ref 属性。ref 属性值与变量名要保持一致。

import { defineComponent } from 'vue'export default defineComponent({  name: 'demo-component-tsx',  setup (props, context) {    const demoFun = (str: string) => {      console.log('demo component tsx', str)    }    // 使用 expose 暴露组件内部的方法    context.expose({ demoFun })    return () => (      <el-button type="primary" onClick={() => demoFun('child')}>demo component tsx</el-button>    )  }})

如上面的代码所示：第一个子组件的 ref 属性值为 sfcRef，定义的变量名也是 sfcRef。在父组件中便可以使用 sfcRef 调用子组件的 demoFun 方法了。

2.2 TSX（.tsx）调用

在 .tsx 中获取组件的引用更简单，首先定义一个 ref 变量，然后将该变量设置给子组件的 ref 属性即可。

import { defineComponent, ref } from 'vue'import DemoComponentSfc from '@/components/ref/demo-component-sfc.vue'import DemoComponentTsx from '@/components/ref/demo-component-tsx'export default defineComponent({  name: 'demo-ref-tsx',  setup () {    const sfcRef = ref()    const onBtnClick1 = () => {      if (sfcRef.value) {        sfcRef.value && sfcRef.value.demoFun('parent')      }    }    const tsxRef = ref()    const onBtnClick2 = () => {      if (tsxRef.value) {        tsxRef.value && tsxRef.value.demoFun('parent')      }    }    return () => (      <>        <div>          <DemoComponentSfc ref={sfcRef} />          <el-button onClick={onBtnClick1}>parent button</el-button>        </div>        <div >          <DemoComponentTsx ref={tsxRef} />          <el-button onClick={onBtnClick2}>parent button</el-button>        </div>      </>    )  }})

两者实现效果一致：

以上就是“怎么使用Vue3 SFC和TSX方式调用子组件中的函数”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。