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

ToDoList使用自定义事件传值

news 2026/5/15 18:48:24

MyTop与MyFooter与App之间传递数据涉及到的就是子给父传递数据，MyList和MyItem与App涉及到爷孙传递数据。

之前的MyTop是使用props接收App传值，然后再在methods里面调用，现在使用自定义事件来处理子组件和父组件之间传递数据。



图是之前的props接收传值方式

在这里插入图片描述




在App的MyTop组件中使用自定义事件

  <MyTop @addTodo="addTodo"/>

给MyTop组件定义一个自定义事件addTodo，事件的回调也是addTodo，可以重名不冲突。


在MyTop中取消props接收传值，也不用调用addTodo。


emits​用于声明由组件触发的自定义事件。

      this.$emit('addTodo',todoObj)

this.$emit(‘addTodo’,todoObj) 被调用，addTodo相应的验证函数将接受参数todoObj。

MyFooter中的todos是数据，不可以作为自定义事件（因为不是函数，只有函数才可以是自定义事件）

App,MyFooter中的方法同上操作

   <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>

props接收todos数据但是不接受方法，方法改用自定义事件

勾选方法使用$emit调用自定义事件

文章涉及到的TodoList案例可以参考之前的文章
ToDoList待办事件（Vue实现）详解

相关文章：

ToDoList使用自定义事件传值

MyTop与MyFooter与App之间传递数据涉及到的就是子给父传递数据&#xff0c;MyList和MyItem与App涉及到爷孙传递数据。 之前的MyTop是使用props接收App传值&#xff0c;然后再在methods里面调用&#xff0c;现在使用自定义事件来处理子组件和父组件之间传递数据。 图是之前的…...

编程日记 2023/10/8 3:55:44

基于SSM的家庭财务管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/10/8 3:54:43

OpenHarmony Trace的使用

背景&#xff1a; 近期很多开发者反馈OpenHarmony三方库Imageknife有性能问题&#xff1a;连续拖动很多张图片时&#xff0c;界面有明显的卡顿现象。 因为对这个三方库的源码并不了解&#xff0c;因此需要了解目前Imageknife渲染花费了多少时间&#xff0c;最初想的是只有通过…...

编程日记 2023/10/8 3:52:41

文件上传笔记

一、上传的简单绕过&#xff1a; 1、若是上传的文件只在前端的代码中进行了过滤&#xff1a; &#xff08;1&#xff09;可以直接在开发者工具中删除相关代码&#xff1a; &#xff08;2&#xff09;也可以通过 burpsuite 绕过: 上传时&#xff0c;先提前修改 php 文件的后缀…...

编程日记 2023/10/8 3:49:37

计算机网络 第三章数据链路层

参考视频&#xff1a;计算机网络 文章目录 1、数据链路层概述2、链路层基本概念&#xff1a;节点3、链路层基本概念&#xff1a;链路与数据链路、帧4、封装成帧&#xff1a;字符计数法和字符填充法5、封装成帧&#xff1a;零比特填充法6、封装成帧&#xff1a;违规编码法7、差…...

编程日记 2023/10/8 3:47:33

浅析如何在抖音快速通过新手期并积累粉丝

抖音是一款非常受欢迎的短视频分享平台&#xff0c;它提供了一个快速成名和积累粉丝的机会。对于新手来说&#xff0c;通过四川不若与众总结的以下几个步骤可以帮助你快速通过抖音的新手期。 首先&#xff0c;确定你的内容定位。在抖音上&#xff0c;有各种各样的内容类型&…...

编程日记 2023/10/8 3:43:28

英文论文实例赏析——如何写前言？

写作与实验、统计一样重要 研究生的学习往往会遵循这样的过程&#xff1a;实验——数据分析——写作。虽然写作是最后进行的&#xff0c;但写作的学习这应该和实验的学习、数据分析的学习保持同步&#xff0c;因为写作与统计和实验技能一样&#xff0c;是科研工具箱的必…...

编程日记 2023/10/8 3:41:26

springBoot -md

法1 Editor.md https://blog.csdn.net/weixin_42039228/article/details/123472875 CREATE TABLE article ( id int(10) NOT NULL AUTO_INCREMENT COMMENT int文章的唯一ID, author varchar(50) NOT NULL COMMENT 作者, title varchar(100) NOT NULL COMMENT 标题, content l…...

编程日记 2023/10/8 3:39:23

从0开始学go第五天

gin框架返回JSON package mainimport ("net/http""github.com/gin-gonic/gin" )func main() {r : gin.Default()r.GET("/json", func(c *gin.Context) {//用map序列化//方法一&#xff1a;用map&#xff0c;后面用接口类型// data : map[string…...

编程日记 2023/10/8 3:35:17

大厂技术面试中的手撕代码应该如何准备？

文章目录 手撕代码是什么为什么要考察手撕代码如何准备手撕代码手撕代码注意事项华为OD算法/大厂面试高频题算法练习冲刺训练 不管是秋招还是社招&#xff0c;互联网大厂的技术面试中的手撕代码这一部分总是绕不过去的一关。不只是后端开发和算法岗&#xff0c;现在就连前端、运…...

编程日记 2023/10/8 3:33:14

阿里影业+大麦，开启大文娱新纪元？

被“精心呵护”长达十年后&#xff0c;阿里大文娱在今年终于踏上了关键节点。 3月份&#xff0c;阿里“16N”组织大变革后&#xff0c;大文娱集团独自上路。8月&#xff0c;“分家”后的第一份财报显示&#xff0c;阿里大文娱集团成功大幅扭亏&#xff0c;实现了首次季度经调整…...

编程日记 2023/10/8 3:32:11

springboot整合mybatis入门程序

1.准备工作(创建springboot工程、数据库表user、实体类User) 创建数据表&#xff1a; create table user(id int unsigned primary key auto_increment comment ID,name varchar(100) comment 姓名,age tinyint unsigned comment 年龄,gender tinyint unsigned comment 性别, 1…...

编程日记 2023/10/8 3:31:10

【BI看板】Superset2.0+图表二次开发初探

Superset图表功能也很丰富了&#xff0c;但一些个性化的定制需求就需要二次开发了。网上二开的superset版本大多是0.xxx版本的或1.5xxx版本&#xff0c;本次用的是2.xxx。 源码相关说明 源码目录 superset-2.0\superset-frontend\plugins\plugin-chart-echarts Yeoman 生成器 …...

编程日记 2023/10/8 3:28:04

微服务学习--1入门

写在前面&#xff1a; 最近摆了几天&#xff0c;现在重新开始学习。《本文没啥用》。 文章目录 概念概括优劣势特征 SpringCloud 概念 概括 微服务技术是分布式架构的一种&#xff0c;因为一个机器的能力有限&#xff0c;需要集群来进行同时解决&#xff0c;但是分布式也就…...

编程日记 2023/10/8 3:27:03

docker系列6：docker安装redis

传送门 docker系列1&#xff1a;docker安装 docker系列2&#xff1a;阿里云镜像加速器 docker系列3&#xff1a;docker镜像基本命令 docker系列4&#xff1a;docker容器基本命令 docker系列5&#xff1a;docker安装nginx Docker安装redis 通过前面4节&#xff0c;对docke…...

编程日记 2023/10/8 3:26:02

计算机网络（三）：数据链路层

参考引用 计算机网络微课堂-湖科大教书匠计算机网络&#xff08;第7版&#xff09;-谢希仁 1. 数据链路层概述 1.1 数据链路层在网络体系结构中所处的地位 链路 (Link) 就是从一个结点到相邻结点的一段物理线路&#xff0c;而中间没有任何其他的交换结点 数据链路 (Data Link)…...

编程日记 2023/10/8 3:22:59

【计算机组成 课程笔记】7.2 DRAM和SRAM

课程链接&#xff1a; 计算机组成_北京大学_中国大学MOOC(慕课) 7 - 2 - 702-DRAM和SRAM&#xff08;13-22--&#xff09;_哔哩哔哩_bilibili 从【计算机组成 课程笔记】7.1 存储层次结构概况_Elaine_Bao的博客-CSDN博客中&#xff0c;我们了解到&#xff1a;SRAM比较快&#x…...

编程日记 2023/10/8 3:19:56

1802_在Linux系统上开发ARM单机片机嵌入式软件

全部学习汇总&#xff1a; GreyZhang/little_bits_of_linux: My notes on the trip of learning linux. (github.com) 1. 在Linux上也有嵌入式的开发环境&#xff0c;或许还有很多。不过&#xff0c;我现在接触到的大部分还是Windows居多。这一份文件介绍的是一个mbed platform…...

编程日记 2023/10/8 3:17:53

【计算机网络-自顶向下方法】应用层（HTTP、FTP）

目录 1. Principles of network applications创建一个网络应用1.1 网络应用架构1.1.1 客户-服务器架构1.1.2 P2P架构1.1.3 两种架构的比较 1.2 不同终端上的进程通信1.3 应用需要什么样的传输服务1.4 因特网能够提供的传输服务1.5 应用层协议1.6 小结 2. Web and HTTPWeb应用画…...

编程日记 2023/10/8 3:14:49

CSS文本超出显示小数点

目录 1、单行文本溢出 2、多行文本溢出 1、基于高度截断 2、基于行数截断 1、单行文本溢出 如果解决文本溢出显示省略号&#xff0c;需要满足的三个条件&#xff1a; 先强制一行内显示文本 white-space:nowrap;/*默认normal 自动换行*/ 超出的文本隐藏起来。 overflow:…...

编程日记 2023/10/8 3:13:47

智能休息提醒扩展：基于上下文感知的开发者健康管理工具

1. 项目概述&#xff1a;一个为开发者设计的“代码暂停”利器如果你和我一样&#xff0c;每天大部分时间都泡在代码编辑器里&#xff0c;那你肯定经历过这样的时刻&#xff1a;盯着一段复杂的逻辑或者一个棘手的Bug&#xff0c;大脑高速运转了半小时&#xff0c;却感觉毫无进展…...

编程新知 2026/5/15 18:19:27

【NotebookLM考古学研究辅助实战指南】：20年文博技术专家亲授3大冷启动技巧，让田野笔记秒变学术论文

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM考古学研究辅助的范式革命 NotebookLM 作为 Google 推出的基于文档理解的 AI 助手&#xff0c;正悄然重塑考古学研究的信息处理范式。传统考古工作依赖大量手写笔记、田野报告、碳十四测年数…...

编程新知 2026/5/15 18:04:39

基于Circuit Playground Express与MakeCode的阿基米德螺旋桨智能小船制作

1. 项目概述&#xff1a;当古老智慧遇见现代创客阿基米德螺旋&#xff0c;这个诞生于两千多年前的巧妙发明&#xff0c;最初被用来从低处向高处提水。它的核心原理简单而强大&#xff1a;一个旋转的螺旋面&#xff0c;能将流体或颗粒物沿着轴向“推”动。今天&#xff0c;我们不…...

编程新知 2026/5/15 17:53:55

从Figma到Midjourney的极简工作流革命：1套可复用的“视觉降噪SOP”（含内部团队验证版Checklist）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从Figma到Midjourney的极简工作流革命 设计师不再需要在多个平台间反复导出、重命名、上传——一个轻量级自动化桥接层&#xff0c;即可将 Figma 的视觉输出精准转化为 Midjourney 的提示工程输入。核心…...

编程新知 2026/5/15 17:47:31

构建企业级安全运维体系：从SSH堡垒机到自动化管控平台

1. 项目概述&#xff1a;从“GMSSH/GMClaw”看现代远程访问与管理的演进最近在和一些做基础设施和运维的朋友交流时&#xff0c;他们频繁提到一个组合词&#xff1a;“GMSSH/GMClaw”。乍一听&#xff0c;这像是一个内部代号或者某个新工具的名字。深入聊下去才发现&#xff0c…...

编程新知 2026/5/15 17:22:31

别再折腾LibreOffice了！CentOS 7.9上老牌Apache OpenOffice 4.1.14的完整部署与后台服务化指南

在CentOS 7.9上部署Apache OpenOffice 4.1.14作为无头文档处理服务的完整指南 对于需要在Linux服务器上搭建稳定文档处理服务的运维和开发人员来说&#xff0c;Apache OpenOffice仍然是一个值得考虑的选择。尽管LibreOffice在功能和社区支持上更为活跃&#xff0c;但在某些特定…...

编程新知 2026/5/15 15:47:22

Arcmap专题制图保姆级教程：从横向页面布局到网格样式自定义（附南海小图制作）

Arcmap专题制图全流程实战&#xff1a;从页面布局到南海小图制作 当你面对一堆地理数据却不知如何转化为专业地图时&#xff0c;Arcmap的专题制图功能就是你的救星。不同于简单的数据可视化&#xff0c;专题制图需要兼顾科学性与美学表达&#xff0c;既要准确传达空间信息&…...

编程新知 2026/5/15 11:44:43

告别依赖地狱：手把手教你用Docker一键部署带GUI的Kettle（避坑libwebkitgtk）

告别依赖地狱&#xff1a;用Docker容器化部署Kettle的终极实践指南 每次在Linux服务器上安装Kettle时&#xff0c;你是否也经历过这样的噩梦&#xff1f;先是提示缺少libwebkitgtk库&#xff0c;然后发现yum仓库里根本没有这个包&#xff0c;接着开始疯狂搜索各种第三方源&…...

编程新知 2026/5/15 11:32:15

股市均线全解：种类、含义、计算、用法

一、均线是什么均线 移动平均线&#xff08;MA&#xff09;把一段时间内的收盘价做平均&#xff0c;连成一条线&#xff0c;用来平滑股价波动&#xff0c;看清趋势、支撑、压力。二、常用均线有哪些&#xff08;默认 5/10/20/30/60/120/250&#xff09;表格均线名称周期市场俗…...

编程新知 2026/5/15 10:55:43

Python高阶学习路径指南

Python是一门强大且应用广泛的高级编程语言&#xff0c;其学习路径可以从基础语法一直延伸到数据科学、人工智能、Web开发等多个专业领域。 一个系统、严谨且富有挑战性的学习路径&#xff08;区别于简单入门教程&#xff09;应遵循从基础到核心&#xff0c;再到专业应用与深度…...

编程新知 2026/5/15 10:45:17