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

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 方式调用子组件中的函数的更多相关文章

  1. Angular 4 父组件调用子组件中的方法

    1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...

  2. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  3. Vue3 SFC 和 TSX 方式自定义组件实现 v-model

    1 v-model 1.1 理解 v-model v-model 是 vue3 中的一个内置指令,很多表单元素都可以使用这个属性,如 input.checkbox 等,咱可以在自定义组件中实现 v-m ...

  4. react父组件调用子组件中方法

  5. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  6. vue 父组件中调用子组件函数

    2019/06/06 在父组件中调用子组件的方法:  1.给子组件定义一个ref属性.eg:ref="childItem"  2.在子组件的methods中声明一个函数.eg: u ...

  7. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  8. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  9. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

随机推荐

  1. RSS订阅微信公众号初探-feed43

    为什么用RSS,能怎么用RSS订阅微信公众号 建议信息聚合(Really Simple Syndication, RSS)在08年我第一次摸到自己家电脑时就给我留下了印象,当时还想这打开都啥玩意呀怎么 ...

  2. 项目经验记录丨Modbus转EtherNET/IP协议转换应用

    使用电脑通过软件来进行模拟 EtherNET/IP主站连接Mdodbus从站设备的项目记录.使用软件为EIPScan 模拟主站,通过Modbus转EtherNET/IP网关连接Modbus Slave ...

  3. 【原创】JS文件替换神器--Chrome ReRes插件

    本文仅供学习交流使用,如侵立删! JS文件替换神器--Chrome ReRes插件 ReRes插件安装配置 ReRes项目官方地址:https://github.com/annnhan/ReRes 谷 ...

  4. Python 实现列表与二叉树相互转换并打印二叉树封装类-详细注释+完美对齐

    # Python 实现列表与二叉树相互转换并打印二叉树封装类-详细注释+完美对齐 from binarytree import build import random # https://www.cn ...

  5. kali下安装Nessus

    Kali安装Nessus 说明 Nessus是一款基于插件的系统漏洞扫描和分析软件 一.安装 1.下载安装包 https://www.tenable.com/downloads/nessus 查看ka ...

  6. Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室

    前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...

  7. linux tcp 在timewait 状态下的报文处理

    最近处理一个问题,我们nginx服务器作为透明代理,将核心网过来的用户上网请求代理到我们的cache服务器,如果cache服务器没有命中内容,则需要我们 作为客户端往源站请求内容,但用户对此一无所知, ...

  8. KingbaseES rownum 与 limit 的 执行计划区别

    数据准备 --创建基础数据表100W行 create table test07 as select * from (select generate_series(1, 1000000) id, (ra ...

  9. SpringBoot_事务总结

    Springboot 事务 1. 打印SQL 日志的两种配置方式 [1]通过配置包的log等级来打印SQL日志,但这种不会打印出事务日志 logging.level.com.grady.mybatis ...

  10. python脚本将json文件生成C语言结构体

    1.引言 以前用过python脚本根据excel生成相关C语言代码,其实本质就是文件的读写,主要是逻辑问题,这次尝试将json文件生成C语言的结构体. 2.代码 这是一个json文件,生成这个结构体的 ...