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

ToDoList使用自定义事件传值

news 2026/2/8 22:09:21

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

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/11/26 13:15:57

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24