ts踩坑!vue3中defineEmits接收父组件向子组件传递方法,以及方法所需传的参数及类型定义!

news2024/11/14 3:36:36

使用说明
1、在子组件中调用defineEmits并定义要发射给父组件的方法 const emits= defineEmits([‘foldchange’])
2、使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收
3、在子组件要触发的方法中,调用emits并传入发射给父组件的方法以及参数 emits(‘foldChange’, value)

父组件:

function getCron(cron: string): void {
    formData.value.cron = cron;
}
/
 <cronAdd ref="cronAddRef" @getCron="getCron"></cronAdd>

子组件:
ts-plugin报错信息提示emits就只接受一个参数,即方法名, 第二个参数值就会报错,
在这里插入图片描述

正确写法:
子组件:
定义方法时,同时定义方法所需参数及类型value
在这里插入图片描述

function changeCron(val: string): void {
    emits("getCron", val)
}

defineEmits中多种定义方式:

// defineEmits适用于父组件向子组件传递方法
const emits = defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'confirm'): void;
  (e: 'close'): void;
}>();
const emits = defineEmits([
  'update:visible',
  'closeDialog',
  'openDialog',
  'comfirmBtn'
]);
const emit = defineEmits(['update:modelValue', 'handleClose', 'transformFileUrl']);
const emits = defineEmits(['update-cropper', 'colse-dialog', 'upload-img'])

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

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

相关文章

【C语言初阶】探索编程基础:深入理解分支与循环语句的奥秘

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C语言 “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C语言入门 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀分支与循环语句 &#x1f4d2;1.…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十三)-更换无人机控制器

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…

Kafka:Kafka详解

Kafka 消息中间件 区别于rabbitmq,kafka更适用于量级较大的数据(100w级),主要在大数据领域使用 Kafka介绍 一个分布式流媒体平台,类似于消息队列或企业消息传递系统 Kafak的结构如下 producer:发布消息的对象 topic:Kafak将消息分门别类,每类的消息称为一个主题(Topic) …

《0基础》学习Python——第十一讲__时间函数

一、时间函数是Python中的内置函数和模块&#xff0c;用于处理日期和时间相关的操作。以下是常用的时间函数的种类和用法&#xff1a; 1、time.time()&#xff1a;返回当前时间的时间戳。 时间戳&#xff08;timestamp&#xff09;是一种表示日期和时间的方式&#xff0c;它是一…

高频面试题基本总结回顾4(含笔试高频算法整理)

目录 一、基本面试流程回顾 二、基本高频算法题展示 三、基本面试题总结回顾 &#xff08;一&#xff09;Java高频面试题整理 &#xff08;二&#xff09;JVM相关面试问题整理 &#xff08;三&#xff09;MySQL相关面试问题整理 &#xff08;四&#xff09;Redis相关面试…

使用 SSH 通过 VS Code 连接企业服务器并拉取 Git 仓库代码的指南

文章目录 前言一、SSH 是什么&#xff1f;1.1 SSH 的主要特性和用途1.2 SSH 的工作原理 二、 为什么使用 SSH 而不是 HTTPS三、使用步骤3.1 生成 SSH 密钥3.2 配置 VS Code 远程连接3.3 通过 SSH 克隆 Git 仓库3.4 安装必要的组件 总结 前言 在现代软件开发中&#xff0c;远程…

Sentinel-1 Level 1数据处理的详细算法定义(四)

《Sentinel-1 Level 1数据处理的详细算法定义》文档定义和描述了Sentinel-1实现的Level 1处理算法和方程,以便生成Level 1产品。这些算法适用于Sentinel-1的Stripmap、Interferometric Wide-swath (IW)、Extra-wide-swath (EW)和Wave模式。 今天介绍的内容如下: Sentinel-1 L…

鸿蒙语言基础类库:【@ohos.data.storage (轻量级存储)】

轻量级存储 轻量级存储为应用提供key-value键值型的文件数据处理能力&#xff0c;支持应用对数据进行轻量级存储及查询。数据存储形式为键值对&#xff0c;键的类型为字符串型&#xff0c;值的存储数据类型包括数字型、字符型、布尔型。 说明&#xff1a; 开发前请熟悉鸿蒙开发…

红色文化3D虚拟数字展馆搭建意义深远

在房地产与土地市场的浪潮中&#xff0c;无论是新城规划、乡村振兴&#xff0c;还是商圈建设&#xff0c;借助VR全景制作、虚拟现实和web3d开发技术打造的全链条无缝VR看房新体验。不仅极大提升了带看与成交的转化率&#xff0c;更让购房者足不出户&#xff0c;即可享受身临其境…

前端Vue组件化实践:自定义轮播图组件的探索与应用

在前端开发领域&#xff0c;随着业务逻辑的不断丰富和系统规模的日益扩大&#xff0c;传统的开发方式逐渐暴露出种种弊端。其中&#xff0c;最突出的问题之一便是修改一个小的功能或细节可能导致整个系统的逻辑调整&#xff0c;造成开发效率低下和维护困难。为了应对这些挑战&a…

部署大语言模型并对话

随着人工智能技术的飞速发展&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;因其强大的语言理解和生成能力而备受关注。OpenWebUI &#xff0c;原名 Ollama WebUI &#xff0c;是一款专为大语言模型&#xff08;LLM&#xff09;设计的先进 Web 交互…

pdf文件怎么转换为jpg图片?这几种转换方法操作起来很简单!

pdf文件怎么转换为jpg图片&#xff1f;在数字化洪流席卷职场的当下&#xff0c;PDF文档虽一度稳坐信息传输与储存的宝座&#xff0c;却逐渐显露出其在效率与便捷性追求中的疲态&#xff0c;随着技术疆界的不断拓宽&#xff0c;我们愈发深刻地意识到&#xff0c;PDF那复杂的格式…

Python array的特点及使用

1、Python array的特点及使用 1.1、python array为什么只能接收指定类型数据 array 模块提供了一种叫做 array 的数据结构&#xff0c;它表示一块连续的内存空间&#xff0c;所有的元素必须是相同的类型。这是因为在内存中&#xff0c;数组元素存储在连续的位置上&#xff0c…

【256 Days】我的创作纪念日

目录 &#x1f33c;01 机缘 &#x1f33c;02 收获 &#x1f33c;03 日常 &#x1f33c;04 成就 &#x1f33c;05 憧憬 最近收到官方来信&#xff0c; 突然发现&#xff0c;不知不觉间&#xff0c;距离发布的第一篇博客已过256天&#xff0c;这期间我经历了春秋招、毕业答辩…

Type-C PD芯片:引领充电技术的新纪元

随着科技的飞速发展&#xff0c;人们对电子设备的依赖日益加深&#xff0c;对充电速度、效率和安全性的要求也越来越高。在这样的背景下&#xff0c;Type-C PD&#xff08;Power Delivery&#xff09;芯片应运而生&#xff0c;以其高效、安全、智能的特点&#xff0c;成为了充电…

gorm多表联合查询 Joins方法 LEFT JOIN , RIGHT JOIN , INNER JOIN, FULL JOIN 使用总结

gorm中多表联合查询&#xff0c;我们可以使用Joins来完成&#xff0c;这个Joins方法很灵活&#xff0c;我们可以非常方便的多多表进行联合查询&#xff0c; 我们先来看看这个方法的官方定义和使用示例&#xff1a; Joins方法定义和使用示例 当然我们这里要说的使用方式是官方示…

网络运输层之(2)UDP协议

网络运输层之(2)UDP协议 Author: Once Day Date: 2024年7月14日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 通信网络技术_Once-Day的博客-CSDN…

SQL server 练习题2

课后作业 作业 1&#xff1a;自己查找方法&#xff0c;将 homework_1.xls 文件数据导入到 SQLServer 的 homework 数据库中。数据导入完成后&#xff0c;把表名统一改为&#xff1a;外卖表 如下所示&#xff1a; 作业 2&#xff1a;找出所有在 2020 年 5 月 1 日至 5 月 31 …

离散数学,自反和反自反 ,对称和反对称,传递关系 ,复合关系和逆关系 ,关系的闭包

目录 1.自反和反自反 自反性 反自反性 判断关系是自反或是反自反 2.对称和反对称 对称性 反对称性 判断关系是对称或是反对称 3.传递关系 4.复合关系和逆关系 复合关系 逆关系 关系运算的性质 5.关系的闭包 闭包的性质 1.自反和反自反 自反性 反…

适合初创企业的有效 CRM 策略

客户关系管理 (CRM) 是任何企业的重要组成部分&#xff0c;尤其是对于旨在与客户建立牢固而有意义的关系的初创公司而言。实施良好的 CRM 策略不仅可以简化您的销售流程&#xff0c;还可以提高客户满意度和保留率。在本文中&#xff0c;我们将介绍初创公司有效 CRM 策略的关键组…