Vue 3 中的 $emit 函数是如何工作的

在 Vue.js 框架中,组件间的通信是一个核心概念。Vue 提供了多种方式来实现父子组件间的通信,其中 $emit 是子组件向父组件发送消息的一种常用手段。在 Vue 3 中,随着 Composition API 的引入,$emit 的使用方式也发生了一些变化,但其核心原理仍然保持不变。

一、Vue 2 中的 $emit

在 Vue 2 中,我们通常在 Vue 实例的 methods 或 computed 属性中使用 this.$emit 来触发一个自定义事件,并传递数据给父组件。例如:

 

vue复制代码

<template>
<button @click="notifyParent">点击通知父组件</button>
</template>
<script>
export default {
methods: {
notifyParent() {
this.$emit('childToParent', 'Hello from child!');
}
}
}
</script>

在这个例子中,当按钮被点击时,notifyParent 方法会被调用,进而通过 this.$emit 触发一个名为 childToParent 的事件,并传递一个字符串 'Hello from child!' 作为参数。

二、Vue 3 中的 $emit

在 Vue 3 中,你仍然可以使用 this.$emit 在 Options API 中触发事件,但如果你选择使用 Composition API,那么就需要从 setup 函数的参数中获取 emit 函数。例如:

 

vue复制代码

<template>
<button @click="notifyParent">点击通知父组件</button>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
setup(props, { emit }) {
const notifyParent = () => {
emit('childToParent', 'Hello from child!');
};
return { notifyParent };
}
});
</script>

在这个例子中,setup 函数接收两个参数:props 和一个包含多个实用函数的上下文对象。我们可以从这个上下文对象中解构出 emit 函数,并在 setup 函数内部使用它来触发事件。

三、$emit 的工作原理

无论是在 Vue 2 还是 Vue 3 中,$emit 的基本工作原理都是相似的。当你在子组件中调用 $emit 函数时,Vue 会查找该组件的父组件,并查看父组件是否监听了你触发的事件。如果父组件监听了该事件,那么它就会调用与该事件相关联的回调函数,并将你传递的数据作为参数传递给这个回调函数。

这个过程是同步的,意味着一旦你调用了 $emit,父组件中的回调函数就会立即被调用。这使得 $emit 成为一种非常有效的组件间通信手段,尤其是当你需要子组件在某种情况下通知父组件时。

四、注意事项

  1. 事件名:确保你触发的事件名是唯一的,以避免与父组件中其他可能监听的事件发生冲突。通常建议使用 kebab-case(短横线分隔)来命名自定义事件,例如 child-to-parent 而不是 childToParent。但请注意,在模板中监听事件时,你可以使用任何你喜欢的大小写形式,因为 Vue 会自动将它们转换为 kebab-case。然而,在 JavaScript 代码中触发或监听事件时,你需要确保事件名的大小写与模板中的一致。
  2. 数据传递:你可以通过 $emit 传递任何类型的数据给父组件,包括基本类型、对象、数组等。但是请注意,如果你传递了一个对象或数组,并且在父组件中修改了这个对象或数组,那么子组件中的原始数据也会被修改,因为它们引用的是同一个内存地址。如果你不希望这种情况发生,可以考虑传递一个深拷贝的副本给父组件。
  3. 事件监听与解绑:在父组件中,你需要使用 v-on 或 @ 指令来监听子组件触发的事件。当子组件被销毁时,Vue 会自动解绑所有与该组件相关联的事件监听器。但是,如果你手动添加了事件监听器(例如通过 addEventListener),那么你需要手动移除它们,以避免内存泄漏和意外行为。
  4. 与 $attrs 和 $listeners 的关系:在 Vue 2 中,你可以使用 $attrs 和 $listeners 来传递未知的属性和事件给子组件。然而,在 Vue 3 中,这两个属性已经被整合进了 v-bind 和 v-on 的新语法中。这意味着你可以更简洁地在父组件和子组件之间传递属性和事件。但是请注意,如果你显式地定义了一个与从父组件接收的属性或事件同名的属性或事件,那么它将覆盖从父组件接收的值。为了避免这种情况,你可以使用 inheritAttrs: false 选项来阻止自动绑定未知的属性,并手动选择你想要绑定的属性。同时,你也可以使用 v-on="$listeners" 的语法来监听所有从父组件传递下来的事件(尽管在 Vue 3 中这种需求较少见,因为你可以直接监听具体的事件名)。但是请注意,在 Vue 3 中更推荐使用 emits 选项来明确声明子组件可以触发哪些事件,并在父组件中显式地监听这些事件。这可以提高代码的可读性和可维护性,并减少潜在的错误和混淆。同时,使用 emits 选项还可以享受更好的 TypeScript 支持和类型推断功能(如果你在使用 TypeScript 的话)。为了与 Vue 3 的新特性保持一致并充分利用其提供的优势功能(如 Composition API、更灵活的组件间通信方式等),建议在实际开发中优先考虑使用 Vue 3 的新特性和语法规范进行代码编写和组织工作。

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

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

相关文章

[HackMyVM] 靶场 Wave

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…

OpenCV:开源计算机视觉的魔力之门

在当今这个信息爆炸的时代,图像和视频已经成为我们获取和传递信息的主要方式之一。从社交媒体上的照片分享,到安防监控、自动驾驶等领域的图像识别与处理,计算机视觉技术正日益改变着我们的生活。而在这场技术革命中,OpenCV(Open Source Computer Vision Library)这一开源…

Java JDBC JDBC事务管理 JDBC连接池(阿里巴巴Druid连接池、C3P0连接池) JDBC工具类

Java数据库连接 Java DataBase Connectivity。JDBC 规范定义接口&#xff0c;具体的实现由各大数据库厂商来实现。 JDBC可让Java通过程序操作关系型数据库&#xff0c;JDBC基于驱动程序实现与数据库的连接与操作。 JDBC 是 Java 访问数据库的标准规范&#xff0c;真正怎么操作…

C++ 滑动窗口

例1 209. 长度最小的子数组 ①窗口大小不固定 ②求最小长度 -> ret INT_MAX ③数组内的值都大于0&#xff0c; 符合单调性&#xff08;sum nums[right] -> sum增大&#xff09; while里面符合条件&#xff0c;在里面更改ret 参考代码 class Solution { public:i…

redis常见面试问题合集

什么是Redis&#xff1f; Redis是一个开源的、基于内存的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息队列。Redis支持多种数据类型&#xff0c;包括字符串、列表、集合、有序集合和哈希表。 Redis支持的数据类型有哪些&#xff1f; Redis支持五种主要的数据类…

【LeetCode打卡】Day25|216.组合总和III、17.电话号码的字母组合

学习目标&#xff1a; 216.组合总和III 17.电话号码的字母组合 学习内容&#xff1a; 216.组合总和III 题目链接 &&文章讲解 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回所有可能的有效…

集成测试之我的初步学习与总结

基本概念 将软件集成起来后进行测试。 集成测试又叫子系统测试、组装测试、部件测试等。集成测试主要是针对软件高层设计进行测试&#xff0c;一般来说是以模块和子系统为单位进行测试。 集成测试包含的层次 模块内的集成&#xff0c;主要是测试模块内各个接口间的交互集成…

我是如何系统自学python的,值得一看!

当然&#xff0c;我很乐意帮助你规划一个系统的Python自学计划。以下是我为你准备的一个简洁、高效、实战的Python自学指南&#xff1a; 第一步&#xff1a;基础语法和数据结构 学习Python的基本语法&#xff0c;包括变量、数据类型、运算符、条件语句、循环语句等。理解Pyth…

day_12二叉树理论基础以及遍历

第六章 二叉树part01 今日内容&#xff1a; 理论基础 递归遍历 迭代遍历 统一迭代 详细布置 题目分类 二叉树的种类 二叉树有两种主要的形式&#xff1a;满二叉树和完全二叉树。 满二叉树 满二叉树&#xff1a;如果一棵二叉树只有度为0的结点和度为2的结点&#xff0c;并…

java ThreadPoolExecutor 线程池

优点 ThreadPoolExecutor 提供了强大的灵活性和自定义参数的能力&#xff0c;可以根据实际需求来灵活配置线程池的行为。 位置 java.util.concurrent 包下 构造函数 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, TimeUnit unit,…

进程与线程:通过实际生活来解析计算机的基本运作单位

进程与线程 进程与线程&#xff1a;详细解析计算机的基本运作单位1. 进程&#xff1a;独立的执行环境1.1 进程的特点&#xff1a; 2. 线程&#xff1a;轻量级的执行单元2.1 线程的特点&#xff1a; 3. 区别和联系4. 表格 进程与线程&#xff1a;详细解析计算机的基本运作单位 在…

Unity铰链四杆机构设计和运动仿真

一、效果图 设定好各边长度和转速后&#xff0c;点击【设置并启动】&#xff0c;自动生成一个机构模型&#xff0c;并按照原理进行运转 二、铰链四杆机构介绍 机架&#xff1a;A和D是固定位置&#xff0c;叫做机架。 曲柄&#xff1a;B点绕A点旋转&#xff0c;构成曲柄。 连…

990-22产品经理:The benefits of business analytics 业务分析的优势

Turning data into pound isn’t just something for big corporations now. Thanks to relatively inexpensive software and easy-to-use, drag-and-drop tools, pulling data and analysing it – with the goal of growing your business – has never been more uncomplic…

英语学习资源分享

键盘侠的单词记忆软件&#xff1a; Qwerty Learner — 为键盘工作者设计的单词与肌肉记忆锻炼软件https://qwerty.kaiyi.cool/ 经济学人、纽约客等英语外刊杂志下载&#xff1a;若github无法进入可以试试下载VPN插件&#xff08;在浏览器中安装免费的VPN插件&#xff0c;个人推…

重拾C++之菜鸟刷算法第4篇---哈希表

一些理论知识 哈希函数是一种映射关系&#xff0c;根据关键词key&#xff0c;经过一定函数关系得到元素的位置。 常见的哈希函数构造方法 直接定址法 除留余数法 叠加法 随机数法 哈希冲突 不同关键字通过相同哈希函数计算出相同的哈希地址&#xff0c;该种现象称为哈希…

视频汇聚/存储/压缩/诊断平台EasyCVR视频联网整合方案应用特点

随着科技的不断发展&#xff0c;监控视频在各个领域的应用越来越广泛。为了更好地管理和利用这些视频资源&#xff0c;视频联网与整合的需求也越来越多。通过视频联网技术将不同地理位置或不同设备的视频资源进行整合&#xff0c;实现实时共享和集中管理。视频联网整合方案的应…

6、云原生安全之falco的规则解读(部分)(下)

文章目录 3、规则解析记录3.21、检测是否有非特权用户成功执行userfaultfd系统调用3.22、监控容器内通过curl/wget的下载行为3.23、检测容器内修改release_agent文件的场景(无论修改成功与否)3.24、检测Java进程通过网络加载class类文件的行为,该规则用于检测log4j的应急3.2…

Linux运维_Bash脚本_编译安装GNU-Tools

Linux运维_Bash脚本_编译安装GNU-Tools Bash (Bourne Again Shell) 是一个解释器&#xff0c;负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件&#xff0c;并于 1989 年发布的免费软件&#xff0c;作为 Sh (Bourne Shell) 的替代品。 您可以在 Linux 和 …

2024最新算法:鹦鹉优化算法(Parrot optimizer,PO)求解23个基准函数

一、鹦鹉优化算法 鹦鹉优化算法&#xff08;Parrot optimizer&#xff0c;PO&#xff09;由Junbo Lian等人于2024年提出的一种高效的元启发式算法&#xff0c;该算法从驯养的鹦鹉中观察到的觅食、停留、交流和对陌生人行为的恐惧中汲取灵感。这些行为被封装在四个不同的公式中…

C++_红黑树

目录 1、红黑树的规则 2、红黑树节点的定义 3、红黑树插入节点的调整操作 3.1 情况一 3.2 情况二 3.3 情况三 4、红黑树的实现 结语 前言&#xff1a; 在C中&#xff0c;红黑树是二叉搜索树的另一种优化版本&#xff0c;他与AVL树的区别在于保持树的平衡方式不同&…