免费资源部落

这篇文章主要介绍“Vue3中怎么使用SFC和TSX调用子组件的函数”，在日常操作中，相信很多人在Vue3中怎么使用SFC和TSX调用子组件的函数问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3中怎么使用SFC和TSX调用子组件的函数”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1 子组件暴露方法1.1 SFC（.vue）暴露方法

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

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

<template><el-buttontype="primary"@click="demoFun('child')">democomponentsfc</el-button></template><scriptlang="ts"setupname="demo-component-sfc">constdemoFun=(str:string)=>{console.log('democomponentsfc',str)}//使用defineExpose暴露组件内部的方法defineExpose({demoFun})</script>1.2 TSX（.tsx）暴露方法

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

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

import{defineComponent}from'vue'exportdefaultdefineComponent({name:'demo-component-tsx',setup(props,context){constdemoFun=(str:string)=>{console.log('democomponenttsx',str)}//使用expose暴露组件内部的方法context.expose({demoFun})return()=>(<el-buttontype="primary"onClick={()=>demoFun('child')}>democomponenttsx</el-button>)}})2 父组件调用子组件中的方法2.1 SFC（.vue）调用

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

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

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

2.2 TSX（.tsx）调用

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

import{defineComponent,ref}from'vue'importDemoComponentSfcfrom'@/components/ref/demo-component-sfc.vue'importDemoComponentTsxfrom'@/components/ref/demo-component-tsx'exportdefaultdefineComponent({name:'demo-ref-tsx',setup(){constsfcRef=ref()constonBtnClick1=()=>{if(sfcRef.value){sfcRef.value&&sfcRef.value.demoFun('parent')}}consttsxRef=ref()constonBtnClick2=()=>{if(tsxRef.value){tsxRef.value&&tsxRef.value.demoFun('parent')}}return()=>(<><div><DemoComponentSfcref={sfcRef}/><el-buttononClick={onBtnClick1}>parentbutton</el-button></div><div><DemoComponentTsxref={tsxRef}/><el-buttononClick={onBtnClick2}>parentbutton</el-button></div></>)}})

两者实现效果一致：

到此，关于“Vue3中怎么使用SFC和TSX调用子组件的函数”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！