当前位置: 首页 > news >正文

Vue3 + TypeScript中defineEmits 类型定义解析

TypeScript 中 Vue 3 的 defineEmits 函数的类型定义,用于声明组件可以触发的事件。以下是分步解释:

1. 泛型定义

ts

<"closeDialog" | "getApplySampleAndItemX">
  • 作用:定义允许的事件名称集合,即组件只能触发 closeDialog 或 getApplySampleAndItemX 两个事件。

  • 说明:这是一个泛型参数,限定事件名必须为这两个字符串字面量类型之一。


2. 函数参数

ts

(emitOptions: ("closeDialog" | "getApplySampleAndItemX")[])
  • 作用:接受一个事件名数组作为参数(如 ['closeDialog'])。

  • 说明emitOptions 是事件名的数组,用于运行时声明组件支持的事件。


3. 返回值函数

ts

(event: "closeDialog" | "getApplySampleAndItemX", ...args: any[]) => void
  • 作用:返回一个 emit 函数,用于触发事件。

    • event:要触发的事件名,必须是泛型定义中的事件。

    • ...args:事件的参数(类型宽松,允许任意参数)。

  • 说明:调用 emit('closeDialog') 或 emit('getApplySampleAndItemX', arg1, arg2) 时,参数类型不会被严格约束(因 args 是 any[])。


4. 重载(+2 overloads)

  • 作用:提供多种类型定义,以适应不同使用场景。

    • 场景一:运行时声明(传入事件名数组,参数宽松)。

      ts

      defineEmits(['closeDialog'])
    • 场景二:类型声明(通过接口定义事件参数类型,类型严格)。

      ts

      defineEmits<{(e: 'closeDialog'): void;(e: 'getApplySampleAndItemX', sample: string, item: number): void;
      }>()
    • 场景三:可能其他配置方式(如混合使用或额外选项)。


总结

  • 用途:在 Vue 组件中定义可触发的事件。

  • 两种用法

    1. 运行时声明:传入字符串数组,参数类型宽松。

    2. 类型声明:通过接口定义事件及参数类型,实现严格类型检查。

  • 代码中的类型:对应运行时声明,允许任意参数(any[]),而重载覆盖了类型声明等场景,提供更灵活的类型支持。

示例

typescript

// 运行时声明(参数宽松)
const emit = defineEmits(['closeDialog', 'getApplySampleAndItemX']);
emit('closeDialog'); // 正确
emit('getApplySampleAndItemX', 123, 'abc'); // 参数类型不检查// 类型声明(参数严格)
const emitStrict = defineEmits<{(e: 'closeDialog'): void;(e: 'getApplySampleAndItemX', sample: string, item: number): void;
}>();
emitStrict('getApplySampleAndItemX', 'sample', 123); // 参数类型匹配
emitStrict('getApplySampleAndItemX', 123, 'sample'); // 错误:参数类型不匹配

通过重载,defineEmits 能同时支持灵活和严格的类型检查,适应不同开发需求。

http://www.xdnf.cn/news/35893.html

相关文章:

  • [oeasy]python089_列表_删除列表项_remove_列表长度_len
  • 纯FPGA实现驱动AD9361配置的思路和实现之一 概述
  • 从数据处理方式,系统可扩展性和处理性能三方面比较管道过滤器风格和仓储风格
  • Python Requests 库:从安装到精通
  • Dijkstra 算法
  • 蓝桥杯练习题2
  • 深入理解 Spring 单元测试:@SpringBootTest、@Value 注入、@MockBean 使用实战与陷阱
  • 计算机网络八股——HTTP协议与HTTPS协议
  • Python爬虫-爬取猫眼演出数据
  • DataWhale AI春训营 问题汇总
  • 3. 在 2节的基础上 ,实现launch文件简单编写
  • MySql Innodb存储引擎下sql优化
  • 【leetcode刷题日记】lc.322-零钱兑换
  • 自动驾驶---决策规划之导航增强端到端
  • [CPP6] string模拟实现
  • 【Ubuntu】Ubuntu20.04安装搜狗输入法的详细步骤
  • STL之vector基本操作
  • JVM虚拟机--JVM的组成
  • 自动化测试 VS 测试开发
  • xgboost原理及参数分析
  • 2025年Q1数据安全政策、规范、标准以及报告汇总共92份(附下载)
  • 最新得物小程序sign签名加密,请求参数解密,响应数据解密逆向分析
  • Java读取JSON文件并将其中元素转为JSON对象输出
  • C++ 数学算法全解析(二):解方程与三角函数实用指南
  • 【62期获取股票数据API接口】如何用Python、Java等五种主流语言实例演示获取股票行情API接口之沪深A股派现与募资对比数据及接口API说明文档
  • Linux进程控制
  • 点灯大师(第一步)
  • 【RL系列】ReTool: Reinforcement Learning for Strategic Tool Use in LLMs
  • LeetCode --- 154双周赛
  • 在串口通信中使用共享指针(`std::shared_ptr`)