Vue3 emits 结合回调函数的使用

回调函数

先说下啥是回调函数,举个例子,当A方法调用B方法时,A方法会传一个方法作为参数给B方法,B方法中可以去按照逻辑执行A传递过的函数,就是回头再调用A方法传参给的方法。有点绕哈,写段代码参考下

const funA = () => {// 业务逻辑 .....funB('布拉布拉', 123, () => {// 回调的业务逻辑});
};/**
* B 方法 最好加上ts约束
* @param param1 参数1
* @param param2 参数2
* @param fun1   参数函数1,这里是一个函数
*/
const funB = (param1:string, param2: number, fun1: Function){// 拿到参数做业务 ....// 执行参数函数,这里会执行到A方法中传递的方法fun1();
}

其实vue中有很多这种示例,如vue响应式的逻辑处理有很多都是将函数存储到map set集合中,然后去做逻辑,这里主要的思路就是方法传参不仅可以传递普通参数,也可以传递函数,集合存储亦是可以存储函数等待特殊类型。

emits调用回调函数

回到主题哈,结合上面的代码这里就很好理解了。正常emits用于子父组件的通信,子组件通信父组件,使用回调函数就是想父组件接受了子组件的消息后再回调到子组件中。

// 子组件
emtis('demoBack', data, () => {// 回调业务
});// 父组件
<子组件 @demoBack="handleDemoBack">const handleDemoBack = (data, fun) => {// data 是传递的数据// 执行回调函数fun();
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646284.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MacOS 无法ping 通 github.com 解决方案

ping github.com 会显示请求超时&#xff1a; PING github.com (192.30.253.112): 56 data bytes Request timeout for icmp_seq 0 Request timeout for icmp_seq 1 Request timeout for icmp_seq 2 Request timeout for icmp_seq 3 Request timeout for icmp_seq 4 Request …

无刷电机篇(一)直流无刷电机(BLDC)介绍

目录 01 直流无刷电机介绍 直流无刷电机内部结构 转子描述 定子描述 02 直流无刷电机分类 直流无刷电机分类描述 内、外转子电机描述 内、外转子电机区别 03 直流无刷电机参数 无刷电机参数 04 文章总结 大家好&#xff0c;这里是程序员杰克。一名平平无奇的嵌入式软…

PCL 高斯投影正算:大地坐标转高斯投影坐标(C++详细过程版)

目录 一、算法原理二、代码实现三、结果展示四、测试数据PCL 高斯投影正算:大地坐标转高斯投影坐标(C++详细过程版)由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 二、代码实现 头文件及读取保存函数见:

记事本(父页面与iframe子页面的联通,vue3+ts展示fbx模型,与tga贴图)

vue3ts 展示fbx与tga贴图 npm i three --save <template><div ref"modelContainer"></div> </template><script setup lang"ts"> import { ref, onMounted } from vue; import * as THREE from three; import { FBXLoader…

深度学习基础之数据操作

深度学习中最常用的数据是张量&#xff0c;对张量进行操作是进行深度学习的基础。以下是对张量进行的一些操作&#xff1a; 首先我们需要先导入相关的张量库torch。 元素构造&#xff08;初始化&#xff09; 使用arange创造一个行向量&#xff0c;也就是0轴&#xff08;0维&a…

python学习笔记11(程序跳转语句、空语句)

&#xff08;一&#xff09;程序跳转语句 1、break 用法&#xff1a;循环语句中使用&#xff0c;结束本层循环&#xff0c;一般搭配if来使用。注意while/else语法 示例&#xff1a; i0; while i<3:user_nameinput(请输入用户名&#xff1a;)pwdinput("请输入密码&a…

arco design table遇到的一些问题

问题1:不知情就成了树形table table中不知道为啥就多了个树形加号在前面,查找问题后发现,是后端返回的数据中有children,框架中默认对这个参数做了树形结构。 解决办法: 当时没找到取消或者修改字段的属性或方法,就将此字段去掉,并将内容clone到childData。 问题2:c…

Java如何对OSS存储引擎的Bucket进行删除【OSS学习】

在前面学会了如何对OSS里面的Bucket进行创建&#xff1a;Java如何对OSS存储引擎的Bucket进行创建-CSDN博客 接下来&#xff0c;记录一下如何删除Bucket存储空间 目录 1、看看OSS&#xff1a; 2、代码&#xff1a; 3、运行效果&#xff1a; 1、看看OSS&#xff1a; 我准备将…

opencv009 滤波器01(卷积)

图像卷积操作&#xff08;convolution&#xff09;&#xff0c;或称为核操作&#xff08;kernel&#xff09;&#xff0c;是进行图像处理的一种常用手段&#xff0c; 图像卷积操作的目的是利用像素点和其邻域像素之前的空间关系&#xff0c;通过加权求和的操作&#xff0c;实现…

什么是中间人攻击? ssh 连接出现 Host key verification failed 解决方法

文章目录 前言known_hosts 文件是什么文件路径示例 连接出现 Host key verification failedssh-keygen -R [hostname or ip address]删除整个 known_hosts 文件 其它聊聊中间人攻击ssh 如何保证安全&#xff1f;加密流程漏洞在哪里如何避免中间人攻击 个人简介 前言 最近服务器…

可pin to pin替代TI DRV8872的GLOBALCHIP直流电机驱动芯片GC8872,低成本、宽电压,内置电荷泵,短地短电源保护,限流

在现如今电机驱动芯片处于持续涨价的状态下&#xff0c;并且供货期货期长&#xff0c;偶尔缺货的状态下。为了降低设计成本&#xff0c;第一时间设计出优秀的产品占据市场高位。我这边推荐使用浙江GLOBALCHIP国产电机驱动芯片进行替换设计。供货稳定、价格低廉。GC8872是GLOBAL…

使用uniApp+vue3+Vite4+pinia+sass技术栈构建微信小程序

使用uniApp的cli模式安装&#xff0c;可以使用vscode开发。不用再单独去下载HBuilderX. 1.基础安装 vue3tsuniapp 方法一&#xff1a; npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project方法二&#xff1a;可以去uni-preset-vue的vite分支下选择vite-ts直接下载zi…

win7虚拟机安装VMware Tools失败,主机远程虚拟机解决

情况描述:安装完win732位虚拟机后,VMWare Tools安装失败,这时传文件就成了问题;所以才有了此文档,需要通过主机直接远程到虚拟机进行文件传输,网上的说明不全,导致摸索了一番才解决此问题; 首先,下载win732补丁; 下载地址:Microsoft Update Catalog首先,虚拟机需要…

【数据结构】 链队列的基本操作 (C语言版)

目录 一、链队列 1、链栈的定义&#xff1a; 2、链栈的优缺点&#xff1a; 二、链队列的基本操作算法&#xff08;C语言&#xff09; 1、宏定义 2、创建结构体 3、链栈的初始化 4、链队列的入队 5、链队列的出队 6、取链队列的对头元素 7、链队列的销毁 8、链…

Windows Defender存在威胁执行操作无反应且一直存在红叉(已解决)

文章目录 前言问题如图一、原因二、解决办法&#xff08;亲试有效&#xff09;总结 前言 Windows安全中心&#xff08;Windows Defender&#xff09;执行快速扫描/完全扫描后一直存在威胁&#xff0c;执行隔离或者删除操作后下次扫描还会扫出该威胁&#xff0c;但看威胁文件位置…

一些es的基本操作

目录 给索引增加字段&#xff1a;给索引删除字段[^1]&#xff1a;创建索引&#xff1a;插入document删除document(应该是按ID) : 给索引增加字段&#xff1a; 用postMan: 给名为population_portrait_hash_seven的索引增加了一个text类型的字段。 用chrome插件Elasticvue 的Re…

架构管理敏捷常用工具

产品部署&#xff1a;Jenkins/云效流水线 代码库&#xff1a;Git 产品管理&#xff1a;Maven 任务进度管理&#xff1a;Jira/云效 API管理&#xff1a;SmartdocTorna-接口规范和接口发布 代码review&#xff1a;sornor做代码review 生产事故和BUG管理&#xff1a;阐道/云效-bug…

CentOS最优雅的方式安装mysql8

本来想偷个小懒使用yum/dnf安装一下mysq8,但是发现会出现各种问题,系统是CentOS8的. 于是还是使用最原始但是也是比较简单的方法来进行安装: 首先进入到https://dev.mysql.com/downloads/mysql/ 选择系统是Linux-Generic, 然后系统版本x86 64bit, 选择第一个TAR Archive的文件…

vue.config.js的配置

vue.config.js的配置 const path require(path) const CompressionPlugin require("compression-webpack-plugin") const MomentLocalesPlugin require(moment-locales-webpack-plugin) const ProgressBarPlugin require(progress-bar-webpack-plugin) const ch…

Vue3+Vite使用Puppeteer进行SEO优化(SSR+Meta)

1. 背景 【笑小枫】https://www.xiaoxiaofeng.com上线啦 资源持续整合中&#xff0c;程序员必备网站&#xff0c;快点前往围观吧~ 我的个人博客【笑小枫】又一次版本大升级&#xff0c;虽然知道没有多少访问量&#xff0c;但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实…