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 方式调用子组件中的函数的更多相关文章
- Angular 4 父组件调用子组件中的方法
1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...
- 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();
子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...
- Vue3 SFC 和 TSX 方式自定义组件实现 v-model
1 v-model 1.1 理解 v-model v-model 是 vue3 中的一个内置指令,很多表单元素都可以使用这个属性,如 input.checkbox 等,咱可以在自定义组件中实现 v-m ...
- react父组件调用子组件中方法
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- vue 父组件中调用子组件函数
2019/06/06 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: u ...
- react中直接调用子组件的方法(非props方式)
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
随机推荐
- RSS订阅微信公众号初探-feed43
为什么用RSS,能怎么用RSS订阅微信公众号 建议信息聚合(Really Simple Syndication, RSS)在08年我第一次摸到自己家电脑时就给我留下了印象,当时还想这打开都啥玩意呀怎么 ...
- 项目经验记录丨Modbus转EtherNET/IP协议转换应用
使用电脑通过软件来进行模拟 EtherNET/IP主站连接Mdodbus从站设备的项目记录.使用软件为EIPScan 模拟主站,通过Modbus转EtherNET/IP网关连接Modbus Slave ...
- 【原创】JS文件替换神器--Chrome ReRes插件
本文仅供学习交流使用,如侵立删! JS文件替换神器--Chrome ReRes插件 ReRes插件安装配置 ReRes项目官方地址:https://github.com/annnhan/ReRes 谷 ...
- Python 实现列表与二叉树相互转换并打印二叉树封装类-详细注释+完美对齐
# Python 实现列表与二叉树相互转换并打印二叉树封装类-详细注释+完美对齐 from binarytree import build import random # https://www.cn ...
- kali下安装Nessus
Kali安装Nessus 说明 Nessus是一款基于插件的系统漏洞扫描和分析软件 一.安装 1.下载安装包 https://www.tenable.com/downloads/nessus 查看ka ...
- Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室
前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...
- linux tcp 在timewait 状态下的报文处理
最近处理一个问题,我们nginx服务器作为透明代理,将核心网过来的用户上网请求代理到我们的cache服务器,如果cache服务器没有命中内容,则需要我们 作为客户端往源站请求内容,但用户对此一无所知, ...
- KingbaseES rownum 与 limit 的 执行计划区别
数据准备 --创建基础数据表100W行 create table test07 as select * from (select generate_series(1, 1000000) id, (ra ...
- SpringBoot_事务总结
Springboot 事务 1. 打印SQL 日志的两种配置方式 [1]通过配置包的log等级来打印SQL日志,但这种不会打印出事务日志 logging.level.com.grady.mybatis ...
- python脚本将json文件生成C语言结构体
1.引言 以前用过python脚本根据excel生成相关C语言代码,其实本质就是文件的读写,主要是逻辑问题,这次尝试将json文件生成C语言的结构体. 2.代码 这是一个json文件,生成这个结构体的 ...