uniapp组件中的emit声明触发事件

emit解析

在 uniapp 中,emit 主要用于组件间通信,特别是在子组件需要向父组件或者其他组件发送消息的时候。具体用途包括:

  1. 子传父数据:子组件通过 $emit 触发一个事件,并携带参数,父组件监听这个事件并对参数进行处理,从而实现从子组件向父组件传递数据。
  2. 组件间通信:不仅仅限于父子组件之间,也可以用于兄弟组件或者更复杂的组件结构之间的通信。
  3. 状态管理:通过触发特定事件来更新应用的状态或UI,使得组件可以根据这些事件做出响应。
  4. 解耦组件:通过事件机制,可以让组件之间不需要直接引用彼此,提高组件的独立性和可复用性。

简单使用


子组件:通过$.emit(函数名,值)向父组件传递一个数据

<template><view>子组件<button @click="$.emit('add',123)">按钮</button></view>
</template><script setup>
</script><style lang="scss" scoped>
</style>

父组件:通过子组件的事件名称add并定义名称onAdd(注意:没有括号)进行接收,通过变量e进行接收传递的数据

<template><bdqn-header @add='onAdd'></bdqn-header>
</template><script setup>var onAdd = (e) => {console.log(e);}
</script>

什么是 defineEmits

  1. 定义事件

    • defineEmits 在函数中使用,返回一个对象,该对象包含了所有可以触发的事件。
    • 这个对象可以用来触发这些事件,并传递参数。
  2. 类型安全

    • defineEmits 可以提供类型安全,确保触发的事件和参数类型正确。
  3. 总结
  • defineEmits 用于定义组件可以触发的事件。
  • 通过 emits 对象触发事件,并传递参数。
  • 父组件或其他组件可以通过 @add 监听并处理事件。
<template><view>子组件<button @click="onclick">按钮</button></view>
</template><script setup>var emit = defineEmits(["num","sum"])var onclick=()=>{emit("num",15151)emit("sum",6666)}
</script><style lang="scss" scoped>
</style>
<template><bdqn-header @num='mynum' @sum='mysum'></bdqn-header>
</template><script setup>var mynum = (e) => {console.log(e);}var mysum = (e) =>  {console.log(e);}
</script>

vue3生命周期:创建->挂载->更新->销毁

Vue 3 的生命周期钩子与 Vue 2 类似,但在 Composition API 中,钩子名称略有不同,以 on 开头,例如 onBeforeMountonMounted 等。

  1. 创建阶段

    • setup():这是 Vue 3 的新阶段,用于初始化组件的逻辑。
    • beforeCreatecreated:与 Vue 2 类似,分别在实例初始化之后和实例创建完成时调用。
  2. 挂载阶段

    • beforeMountmounted:与 Vue 2 类似,分别在实例即将挂载到 DOM 和实例被挂载到 DOM 后调用。
  3. 更新阶段

    • beforeUpdateupdated:与 Vue 2 类似,分别在数据更新前和数据更新后调用。
  4. 销毁阶段

    • beforeUnmountunmounted:Vue 3 中的新钩子,分别在实例销毁前和实例销毁后调用。

声明周期钩子:

  • 初始化:在组件创建的不同阶段进行初始化操作。
  • DOM 操作:在 mounted 钩子中可以安全地进行 DOM 操作。
  • 数据监听:在适当的生命周期钩子中添加或移除数据监听器。
  • 资源释放:在组件销毁前释放相关资源,比如清除定时器、取消网络请求等。

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

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

相关文章

Oracle 网络安全产品安全认证检索

自2023年7月1日起&#xff0c;国家网信办、工业和信息化部、公安部、国家认证认可监督管理委员会统一公布和更新网络关键设备和网络安全专用产品清单。列入《网络关键设备和网络安全专用产品目录》的网络安全专用产品应当按照《信息安全技术网络安全专用产品安全技术要求》等相…

笔记:应用Visual Studio Profiler分析CPU使用情况

一、目的&#xff1a;应用Visual Studio Profiler分析CPU使用情况 使用 Visual Studio Profiler 分析 CPU 使用情况可以帮助你识别性能瓶颈&#xff0c;优化代码&#xff0c;提高应用程序的响应速度。 二、实现 以下是如何使用 Visual Studio Profiler 分析 CPU 使用情况的详…

保存json时,保存成自己喜欢的格式的方法(而不是直接保存成格式化的json文档)

保存json时&#xff0c;不是直接保存成格式化的json文档的格式的方法 前言&#xff0c;博主是如何把格式话的json格式保存成自己喜欢的json格式的保存成格式化的json文档的格式&#xff1a;带缩进格式全部保存成一行每条数据保存成一行&#xff1a; 保存成自己喜欢的格式碎碎念…

Hadoop之HDFS的原理和常用命令及API(java)

1、简介 书接上回&#xff0c;上篇博文中介绍如何安装Hadoop和基本配置&#xff0c;本文介绍Hadoop中分布式文件组件--HDFS&#xff0c;在HDFS中&#xff0c;有namenode、datanode、secondnamenode这三个角色&#xff0c;本文将详细介绍这几个组件是如何进行协作的&#xff0c;…

【数据结构 | 每日一题】图的概念辨析

图的概念辨析 考点分析&#xff1a;我们学习数据结构图的第一小节就是&#xff1a;图的基本概念&#xff0c;我们会发现图的概念非常多且有些概念之间又很像&#xff0c;而对于初学者来说&#xff0c;相比树的概念是不好理解的&#xff0c;很容易搞混&#xff0c;因此做了这么…

传输层(TCP、UDP、RDT详解)

目录 1.无连接传输&#xff1a;UDP UDP&#xff1a;User Datagram Protocol&#xff08;用户数据报协议&#xff09; UDP&#xff1a;校验和 Internet校验和的例子 2.可靠数据传输&#xff08;Rdt&#xff09;的原理 可靠数据传输&#xff1a;问题描述 1.Rdt1.0&#xff…

【hot100篇-python刷题记录】【在排序数组中查找元素的第一个和最后一个位置】

R7-二分查找篇 目录 双指针 二分优化 ps: 思路&#xff1a; 双指针 直接用双指针回缩啊 class Solution:def searchRange(self, nums: List[int], target: int) -> List[int]:ret[-1,-1]left,right0,len(nums)-1while left<len(nums):if nums[left]target:ret[0]…

华为Huawei路由器交换机SSH配置

华为设备的SSH登录配置需要5个步骤&#xff0c;示例如下&#xff1a; 一、配置命令 使能SSH功能 stelnet server enable生成公钥 rsa local-key-pair create 1024配置AAA用户密码及相应授权 aaalocal-user xxx password cipher xxxyyy1234local-user xxx privilege level …

三十二、初识Gin框架

目录 一、搭建web项目 1、引入gin依赖 2、搭建项目结构 二、路由绑定 1、创建路由 解释&#xff1a; 2、创建实例化模块 3、创建具体事项 4、main中添加注册 一、搭建web项目 1、引入gin依赖 在项目路径下&#xff0c;终端中输入 go get -u github.com/gin-gonic/gin…

语音测试(一)视频转音频

视频转音频 下载ffmpeg工具进入bin目录cmd进入控制台输入命令 ffmpeg.exe -i ./视频.mp4 ./音频.wav

C语言试题(含答案解析)

单选 1.下面C程序的运行结果为&#xff08;&#xff09; int main(void) {printf("%d", B < A);return 0; }A.编译错误 B.1 C.0 D.运行错误 A’的ascii码值为65&#xff0c;‘B’的ascii码值为66&#xff0c;‘B’<‘A’是不成立的&#xff0c;返回0&#xf…

什么是W外链?外链的优势有哪些?

一、定义 定义W 外链是一家企业级在线短链接生成工具&#xff0c;免费的微信获客助手&#xff0c;支持批量短链接网址生成等&#xff0c;还支持自定义域名短链接数据统计等。在链接缩短的同时&#xff0c;支持高并发、防劫持&#xff0c;是专业的在线生成短链接工具。 网络营…

PrimeTime low power-多电压设计流程(3)

4.Golden UPF flow Golden UPF flow是维护设计多电压电源意图的可选方法。它在整个综合、物理实现和验证步骤中使用原始的Golden UPF 文件,以及由综合和物理实现工具生成的supplemental UPF 文件。 图 141 比较了传统的 UPF-prime 流程与Golden UPF 流程。 Golden UPF 流程在…

达梦数据库事务管理

目录 一、事务简介 二、事务特性 1.原子性 2.一致性 3.隔离性 4.持久性 三、事务提交 1.自动提交模式 2.手动提交模式 3.隐式提交 四、事务回滚 1.自动回滚 2.手动回滚 3.回滚到保存点 4.语句级回滚 五、事务锁定 1.锁模式 &#xff08;1&#xff09;共享锁 …

【加密社】马后炮视角来看以太坊二层战略

阅读正文前先给大家普及下知识&#xff0c;以下文章中提到的 Blobs指的是&#xff1a;"Blob Carriers" 或 "Calldata Blobs" 这是在以太坊网络中用于携带数据的一种方式&#xff0c;尤其是在涉及Rollup&#xff08;如Optimistic Rollup和ZK-Rollup&#xf…

【Git】IDEA代码合并|merge into

&#x1f4dd;个人主页&#x1f339;&#xff1a;执键行天涯 ⏩收录专栏⏪&#xff1a;多线程进阶 &#x1f921;往期回顾&#x1f921;&#xff1a;【不安全的集合类】同步容器&#xff08;如ConcurrentHashMap&#xff09;、并发集合&#xff08;如CopyOnWriteArrayList &…

【正点原子K210连载】第三十四章 image图像滤波实验 摘自【正点原子】DNK210使用指南-CanMV版指南

第三十四章 image图像滤波实验 在上一章节中&#xff0c;介绍了image模块中元素绘制方法给的使用&#xff0c;本章将继续介绍image模块中图像滤波方法的使用。通过本章的学习&#xff0c;读者将学习到image模块中图像滤波的使用。 本章分为如下几个小节&#xff1a; 34.1 imag…

【通过h5作为中转页跳转到微信小程序】

1。从小程序跳转小程序内部页面 <!DOCTYPE html> <html><head><title>H5跳转小程序</title><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, initial-scale1.0, minimum-scale1.0, ma…

【知识库系列】MPR/多模态方向观察:图像视频与3D生成

多模态背后的backbone会长成什么样&#xff1f; 各种模态到梯度下降到最后会不会都差不多&#xff1f; Sora 是不是已经被追上了? 我们真的把视频数据都用好了吗&#xff1f; 知识库完整文档&#xff1a; MPR/多模态方向观察&#xff1a;图像视频与3D生成&#xff1a;https…

基于RK3568平台移植ffmpeg3.4.5及ffmpeg验证

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、移植流程3.1 编译x2643.2 编译mpp3.3 编译ffmpeg四、ffmpeg验证4.1 ffmpeg配置说明4.2 ffmpeg推流/拉流使用说明4.2.1 使用http方式推流/拉流4.2.1.1 先执行ffmpeg服务4.2.1.2 再执行ffmpeg进行推流4.2.1.3 最后执行vlc进…