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

如何在 Vue TypeScript 项目使用 emits 事件

0716eee1e7572ec3ec29e1e3028bee67.jpeg

Vue是构建出色的Web应用程序的最灵活、灵活和强大的JavaScript框架之一。Vue中最重要的概念和关键特性之一是能够促进应用程序组件之间的通信。让我们深入探讨一下Vue中的“emits”概念,并了解它们如何以流畅和无缝的方式实现父子组件之间的通信。

Vue中的emits是什么

Vue应用程序架构中的核心概念之一是组件之间的父子关系。父组件经常需要与其子组件进行交互,反之亦然!我们利用这个概念来创建复杂且交互性强的用户界面。虽然props使得数据从父组件流向子组件,但是“emits”使得数据从子组件流向父组件。

基本上,“emits”是Vue中的一个概念,允许子组件与其父组件进行通信。在Vue中使用emits时,您可以向父组件发出带有数据(可选)的自定义事件。父组件可以监听事件并相应地处理自己的“响应”。这是一种强大的机制,可以促进子组件和父组件之间的无缝通信!

为什么 emits 有用

Emits 提供了一种结构化和解耦的方式,使组件能够与其父组件进行交互。这样可以创建更易于维护和扩展的应用程序。通过利用 emits,我们可以创建可重用的子组件,而不会将它们与其父组件紧密耦合在一起,从而可以在各种上下文中使用。

Emits 在实现子组件与父组件之间的高度解耦方面起着至关重要的作用。当子组件向父组件发射事件时,它们不会直接操作父组件的状态或调用父组件的方法。相反,发射器提供了一个抽象层,允许父组件决定如何处理这些事件。我认为,这种关注点的分离有助于实现更易于维护和可扩展的架构!

组件通信

Vue遵循组件化架构,将用户界面划分为更小、自包含的单元,也称为组件。组件可以嵌套和组合,以构建复杂的应用程序。然而,随着组件的嵌套和应用程序的扩大,组件之间的通信变得必不可少!组件通信允许不同的组件交换数据、触发操作,并在整个应用程序中保持应用程序状态的一致性。

让我们来看一个简单的例子,了解一下如何在Vue中让组件进行通信。

子组件

<template><button @click="sendMessageToParent">Send Message to Parent</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['messageToParent']);const sendMessageToParent = () => {
const message = 'Hello from child!';
emit('messageToParent', message);
}
</script>

父组件

<template><div><child-component @message-to-parent="handleMessageFromChild" /><p>Message from child: {{ messageFromChild }}</p></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const messageFromChild = ref('');const handleMessageFromChild = (message) => {messageFromChild.value = message;
}
</script>

在这个例子中,我们有一个 ChildComponent ,当按钮被点击时,它会发出一个名为 messageToParent 的自定义事件,并携带一个消息负载。 ParentComponent 监听发出的事件,并使用接收到的消息更新其状态( messageFromChild )。

当在 ChildComponent 中点击“发送消息给父级”按钮时,将执行 sendMessageToParent 函数,发出带有“Hello from child!”消息作为其有效负载的自定义事件。

ParentComponent 通过模板中的 @messageToParent 属性接收发出的事件,并使用 handleMessageFromChild 函数处理它。然后,消息有效载荷存储在 messageFromChild 引用中,该引用会自动更新模板以显示来自子组件的消息。

简单吧?这展示了你如何在Vue中使组件“相互通信”。你不仅仅局限于发送字符串作为载荷;你甚至可以发送复杂类型,如对象、数组等等。

如何在Typescript中正确地使用类型推断

使用emits的一个“缺点”是,当你发出一个自定义事件时,你不一定知道子组件会发出什么。这种不确定性可能会导致数据类型和运行时错误的潜在问题。幸运的是,Vue 3的Composition API与TypeScript结合提供了一个非常强大的解决方案来解决这个问题。通过正确地为emits添加类型,你可以确保类型安全性,提高代码清晰度,并使你的Vue应用程序更易于维护。

让我们探索如何使用Vue 3的Composition API和script setup正确地使用TypeScript来输入emits。

子组件(使用TypeScript):

<template><button @click="sendDataToParent">Send Data to Parent</button>
</template><script setup lang="ts">
import { defineEmits } from 'vue';// Define the interface for the emitted object 
// (Ideally a shared interface for both components)
// This could event get exported, fot the parent component can import it
interface ItemData {id: number;name: string;quantity: number;
}const emit = defineEmits<{// Define the emitted event and its payload type(event: 'dataToParent', payload: ItemData[]): void;
}>();function sendDataToParent() {const payload: ItemData[] = [{ id: 1, name: 'Item 1', quantity: 3 },{ id: 2, name: 'Item 2', quantity: 5 },{ id: 3, name: 'Item 3', quantity: 2 },];emit('dataToParent', payload);
}
</script>

父组件:(使用TypeScript)

<template><div><test-child @data-to-parent="handleDataFromChild" /><div v-if="itemsFromChild.length"><p v-for="item in itemsFromChild" :key="item.id">Item: {{ item.name }} | Quantity: {{ item.quantity }}</p></div></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import TestChild from '@/TestChild.vue';// Define the interface for the emitted object 
// (Ideally a shared interface for both components)
interface ItemData {id: number;name: string;quantity: number;
}const itemsFromChild = ref<ItemData[]>([]);const handleDataFromChild = (payload: ItemData[]) => {itemsFromChild.value = payload;
};
</script>

通过利用TypeScript的强大功能,我们可以确保我们的组件之间的通信精确无误且类型安全。使用接口和精确的负载类型定义,我们能够在开发过程中捕获潜在的错误,同时提升代码补全功能,提高应用程序的整体可维护性!

结束

由于文章内容篇幅有限,今天的内容就分享到这里,文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。

粉丝福利

分享一个漂亮的 BootStrap 5 后台管理源码

相关文章:

如何在 Vue TypeScript 项目使用 emits 事件

Vue是构建出色的Web应用程序的最灵活、灵活和强大的JavaScript框架之一。Vue中最重要的概念和关键特性之一是能够促进应用程序组件之间的通信。让我们深入探讨一下Vue中的“emits”概念&#xff0c;并了解它们如何以流畅和无缝的方式实现父子组件之间的通信。 Vue中的emits是什…...

文件操作 黑马教程(04)

1.文本文件 写文件 #include "iostream" #include "fstream" using namespace std; /** 文件操作** 程序运行时产生的数据都属于临时数据&#xff0c;程序一旦结束都会被释放* 通过文件可以将数据持久化* C中对文件操作需要包含头文件<fstream>** 文…...

Jmeter(二十七):BeanShell PostProcessor跨线程全局变量使用

在性能测试中&#xff0c;两个相关联的接口不一定都在同一个线程组&#xff0c;遇见这种情况时&#xff0c;我们要进行跨线程组传参&#xff0c;此处用登录和查询配送单两个请求举例&#xff1b; 1、登录请求中配置json提取器&#xff0c;将接口返回的token保存在变量中&#…...

手写表格OCR识别并与大模型ChatGPT交互?

这是一张手写表格&#xff0c;姓名做了脱敏处理。现在需要对其识别&#xff0c;并分析。 直接粘贴剪切板中的表格原始图片&#xff0c;在网页中ctlV进行识别。识别结果列用分隔符|&#xff0c;可以直接粘贴到excel&#xff0c;进行数据列分隔。为了美观期间&#xff0c;也可以用…...

使用 v-for 指令和数组来实现在 Uni-app 中动态增减表单项并渲染多个数据

在 data 中定义一个数组&#xff0c;用于存储表单项的数据&#xff1a; data() {return {formItems: []} } 在模板中使用 v-for 指令渲染表单项&#xff1a; <template><div><div v-for"(item, index) in formItems" :key"index"><…...

xml

1.xml 1.1概述【理解】 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为…...

Java中的动态代理(JDK Proxy VS CGLib)

前言 动态代理可以说是Java基础中一个比较重要的内容&#xff0c;这块内容关系到Spring框架中的AOP实现原理&#xff0c;所以特别写了一篇作为个人对这块知识的总结。这部分内容主要包括&#xff1a;JDK Proxy和CGLib的基本介绍、二者的实现原理、代码示例等。 什么是动态代理…...

Redis 7 第七讲 哨兵模式(sentinal)

哨兵模式 哨兵巡查监控后台master主机是否故障,如果出现故障根据投票时自动将某一个从库转换成新的主库,继续对外服务。 作用 1. 监控redis运行状态,包括master和slave 2. 当master down机,能自动将salve切换成新的master 应用场景 主从监控监控主从redis库运行的状态…...

Python入门教程 - 判断语句(二)

目录 一、布尔类型 二、比较运算符 三、if判断语句 一、布尔类型 True False result1 10 > 5 result2 10 < 5 print(result1) print(result2) print(type(result1)) True False <class bool> 二、比较运算符 ! > < > < 比较运算的结果是布尔…...

LeetCode-55-跳跃游戏-贪心

题目描述&#xff1a; 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 解…...

【USRP】调制解调系列4:BPSK、QPSK、8PSK、OQPSK、Pi/4DQPSK,基于labview的实现

PSK Phase Shift Keying – 相移键控 在某些调制解调器中用于数据传输的调制系统&#xff0c;在最简单的方式中&#xff0c;二进制调制信号产生0和1。载波相位来表示信号占和空或者二进制1和O。对于有线线路上较高的数据传输速率&#xff0c;可能发生4个或8个不同的相移&…...

深入探讨梯度下降:优化机器学习的关键步骤(一)

文章目录 &#x1f340;引言&#x1f340;什么是梯度下降&#xff1f;&#x1f340;损失函数&#x1f340;梯度(gradient)&#x1f340;梯度下降的工作原理&#x1f340;梯度下降的变种&#x1f340;随机梯度下降&#xff08;SGD&#xff09;&#x1f340;批量梯度下降&#xf…...

layui框架学习(40:数据表格_主要事件)

Layui数据表格模块主要通过各类事件响应工具栏操作、单元格编辑或点击等交互操作&#xff0c;本文学习table数据表格模块中的主要事件及处理方式。   头部工具栏事件。通过代码“table.on(‘toolbar(test)’, function(obj))”获取lay-filter属性为test的数据表格的头部工具栏…...

kotlin实现猜数游戏

游戏规则 1.程序随机生成一个1到100的数字&#xff0c;作为MagicNumber 2.用户根据提示输入数据&#xff0c;只有三次机会输入数据 代码 代码很简单&#xff0c;使用了let内置函数 fun main() {//生成随机数可以使用java的方法//val magicNumber Random().nextInt(11)val ma…...

51单片机项目(8)——基于51单片机的DS1302时钟系统

本次做的设计&#xff0c;是利用DS1302时钟芯片&#xff0c;做了一个时钟&#xff0c;并且将实时时间通过串口发送到上位机进行显示。系统运行如下&#xff1a;&#xff08;protues文件和相关keil代码会在文章最后给出&#xff01;&#xff01;&#xff01;&#xff09; DS1302…...

高频策略:做市商与逆向选择

参与交易市场的三类人&#xff1a; 出于某种现实的需要而进行交易的人。例如投资者买入股票等金融资产长期持有&#xff0c;是为了使自己当前的资产进行升值&#xff0c;获得比银行利息更高的收益&#xff1b;制造业公司为了锁定生产成本而进行对冲交易。对于这些人来说&#…...

Valgrind内存诊断工具的使用笔记

Valgrind是一款用于内存调试、内存泄漏检测以及性能分析的神器&#xff0c;能够帮助我们快速定位到程序的内存问题&#xff0c;比如内存泄漏导致的 段错误 (核心已转储) 包含以下工具&#xff1a; Memcheck&#xff1a;检查程序中的内存问题&#xff0c;如泄漏、越界、非法指…...

docker安装Nacos

哈喽&#xff01;大家好&#xff0c;我是旷世奇才李先生 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】更有我为大家准备的福利哟&#xff0c;回复【项目】获取我为大家准备的项目 文章目录 一、Nacos是什么1、简介2、功能1、服务…...

【Linux】线程安全-死锁

文章目录 死锁问题场景1场景2死锁的gdb调试造成死锁的必要条件不可剥夺循环等待互斥条件请求和保持 预防死锁破坏必要条件&#xff0c;循环等待&请求和保持加锁顺序一致避免锁没有被释放资源一次性分配 死锁问题 死锁的两种场景&#xff1a; 场景1 线程加锁之后一直没有将锁…...

pdf转换成图片免费软件用哪个?pdf转换成图片就用它

随着技术的发展&#xff0c;现在企业办公运用到的电子文档各种各样&#xff0c;我们日常需要掌握的技能越来越高要求&#xff0c;其中pdf和图片是我们经常接触的文件格式之一&#xff0c;而且这两个文件格式我们会经常将它们进行转换&#xff0c;那么pdf转换成图片怎么操作呢?…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...