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

ToDoList使用自定义事件传值

news 2026/3/30 23:11:09

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

StabilityGuide故障排查终极指南：从OutOfMemoryError到StackOverFlowError的完整解决方案

StabilityGuide故障排查终极指南&#xff1a;从OutOfMemoryError到StackOverFlowError的完整解决方案 【免费下载链接】StabilityGuide 项目地址: https://gitcode.com/gh_mirrors/st/StabilityGuide StabilityGuide是阿里巴巴开源的系统稳定性知识库&#xff0c;专注于…...

编程新知 2026/3/30 22:42:02

AIGlasses_for_navigation精彩案例分享：真实视障用户过马路辅助语音引导记录

AIGlasses_for_navigation精彩案例分享&#xff1a;真实视障用户过马路辅助语音引导记录 1. 引言&#xff1a;当AI成为视障者的“眼睛” 想象一下&#xff0c;你站在一个繁忙的路口&#xff0c;耳边是呼啸而过的车流声&#xff0c;眼前却是一片模糊或黑暗。过马路&#xff0c…...

编程新知 2026/3/30 22:40:01

PyTorch Autograd动态计算图实战：从构建、可视化到高效调试

1. 动态计算图的构建原理 PyTorch的Autograd系统最迷人的特性就是它的动态计算图。我第一次接触这个概念时&#xff0c;感觉就像发现了一个魔法黑箱——它能在代码运行时自动记录所有操作&#xff0c;并在需要时反向计算梯度。这种动态特性让PyTorch在调试复杂模型时特别顺手&a…...

编程新知 2026/3/30 22:38:01

万字详解：现象级OpenClaw（俗称“龙虾”）能做什么-周红伟

OpenClaw是一款开源的AI智能体框架&#xff0c;它不是“聊天机器人”&#xff0c;而是“AI执行引擎”——连接大模型的思考能力与电脑的真实操作权限&#xff0c;让AI从“只说不做”变成“说到做到”&#xff0c;可自动完成文件管理、跨应用协同、浏览器操作、代码生成等复杂任…...

编程新知 2026/3/30 22:36:01

利用AI写教材，掌握低查重方法，让你的教材脱颖而出！

许多教材编写者常常会有一种失落感&#xff1a;在花费大量心血完成了主体内容后&#xff0c;配套资源的不足却影响了整体的教学效果。针对课后练习的题型设计&#xff0c;常常缺乏创新的思路&#xff1b;想要制作直观的教学课件&#xff0c;却没有相应的技术能力&#xff1b;对…...

编程新知 2026/3/30 21:53:08

25619+ASMR资源一键获取：让音频收藏效率提升10倍的智能下载工具

25619ASMR资源一键获取&#xff1a;让音频收藏效率提升10倍的智能下载工具 【免费下载链接】asmr-downloader A tool for download asmr media from asmr.one(Thanks for the asmr.one) 项目地址: https://gitcode.com/gh_mirrors/as/asmr-downloader 在数字音频时代&am…...

编程新知 2026/3/30 21:35:01

低代码AI开发：这些工具让AI原生应用开发效率提升10倍

低代码AI开发&#xff1a;这些工具让AI原生应用开发效率提升10倍 关键词&#xff1a;低代码开发、AI原生应用、开发效率、AutoML、拖拽式建模、企业级AI落地、工具链整合 摘要&#xff1a;传统AI开发需要精通算法、数据处理和工程实现&#xff0c;门槛高且周期长。本文将揭秘“…...

编程新知 2026/3/30 21:31:01

开源工具go-cursor-help：技术突破Cursor限制的效率提升方案

开源工具go-cursor-help&#xff1a;技术突破Cursor限制的效率提升方案 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro…...

编程新知 2026/3/30 20:50:46

FastAPI项目PyInstaller打包实战：避坑指南与最佳实践

1. 为什么需要打包FastAPI项目&#xff1f; 当你用FastAPI开发完一个Web应用后&#xff0c;最终需要部署到生产环境。传统方式要求服务器安装Python环境、配置依赖库&#xff0c;这个过程既繁琐又容易出错。PyInstaller的价值就在于能把整个项目打包成独立可执行文件&#xff0…...

编程新知 2026/3/30 19:56:22

告别Postman！用Kettle直接处理钉钉API的POST请求（含MySQL连接jar包缺失解决方案）

告别Postman&#xff01;用Kettle直接处理钉钉API的POST请求&#xff08;含MySQL连接jar包缺失解决方案&#xff09; 在数据集成领域&#xff0c;Kettle&#xff08;现称Pentaho Data Integration&#xff09;一直以其强大的ETL能力著称。但许多开发者可能不知道&#xff0c;这…...

编程新知 2026/3/30 18:30:47