详解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 style="margin-top: 10px;"> <DemoComponentTsx ref={tsxRef} /> <el-button onClick={onBtnClick2}>parent button</el-button> </div> </> ) } })
两者实现效果一致:
到此这篇关于Vue3 SFC 和 TSX 方式调用子组件中的函数的文章就介绍到这了,更多相关Vue调用子组件中的函数内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://www.cnblogs.com/youyacoder/p/16810245.html
相关文章
- eval函数在php中是一个函数并不是系统组件函数,我们在php.ini中的disable_functions是无法禁止它的,因这他不是一个php_function哦。 eval()针对php安全来说具有很...2016-11-25
- 在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
Python astype(np.float)函数使用方法解析
这篇文章主要介绍了Python astype(np.float)函数使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-08- 这篇文章主要介绍了Python中的imread()函数用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 本文主要介绍了C# 中取绝对值的函数。具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- CREATE FUNCTION ChangeBigSmall (@ChangeMoney money) RETURNS VarChar(100) AS BEGIN Declare @String1 char(20) Declare @String2 char...2016-11-25