ToDoList使用自定义事件传值

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实现)详解

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

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

相关文章

Excel技巧之【锁定工作簿】

Excel工作簿是Excel工作区中一个或多个工作表的集合&#xff0c;我们知道Excel可以设置锁定工作表&#xff0c;防止意外或被他人修改&#xff0c;但可能有小伙伴不知道&#xff0c;Excel工作簿也同样可以设置锁定&#xff0c;防止更改。 那工作簿锁定后会怎么样呢&#xff1f;…

【CTFHUB】SSRF绕过方法之靶场实践(二)

SSRF POST请求 提示信息&#xff1a; 这次是发一个HTTP POST请求.对了.ssrf是用php的curl实现的.并且会跟踪302跳转.加油吧骚年 首先测试了http的服务请求&#xff0c;出现对话框 输入数值后提示&#xff1a;只能接受来自127.0.0.1的请求 右键查看源码发现key值 通过file协…

由union引发的Struct占用内存空间和大小端问题的思考

1. 背景 在看Lua源码的时候&#xff0c;很多地方都用到了union&#xff08;共用体或者联合体&#xff09;&#xff0c;在定义lua类型的时候&#xff0c;为了以一个结构来包含所有的数据类型&#xff0c;设计了一个 TValue类型&#xff0c;TValue类型最终关联到 Value类型&#…

二、C++项目:仿muduo库实现并发服务器之时间轮的设计

文章目录 一、为什么要设计时间轮&#xff1f;&#xff08;一&#xff09;简单的秒级定时任务实现&#xff1a;&#xff08;二&#xff09;Linux提供给我们的定时器&#xff1a;1.原型2.例子 二、时间轮&#xff08;一&#xff09;思想&#xff08;一&#xff09;代码 一、为什…

【C++】C++的IO流

C的IO流 一、C语言的输入与输出二、流是什么三、CIO流1、C标准IO流2、C文件IO流3、stringstream的简单介绍 一、C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 scanf(): 从标准输入设备(键盘)读取数据&#xff0c;并将值存放在变量中。p…

raw图片处理软件:DxO PhotoLab 6 mac中文版支持相机格式

DxO PhotoLab 6 mac是一款专业的RAW图片处理软件&#xff0c;适用于Mac操作系统。它具有先进的图像处理技术和直观易用的界面&#xff0c;可帮助用户轻松地将RAW格式的照片转换为高质量的JPEG或TIFF图像。 DxO PhotoLab 6支持多种相机品牌的RAW格式&#xff0c;包括佳能、尼康、…

Rust之自动化测试(二):控制测试如何运行

开发环境 Windows 10Rust 1.72.1 VS Code 1.82.2 项目工程 这里继续沿用上次工程rust-demo 控制测试如何运行 正如cargo run编译您的代码&#xff0c;然后运行生成的二进制文件一样&#xff0c;cargo test在测试模式下编译您的代码&#xff0c;然后运行生成的测试二进制文件…

马尔萨斯《人口原理》读后

200 多年前的书&#xff0c;很多人都说旧的东西过时了&#xff0c;但我觉得它只是被修正了&#xff0c;内核并不过时。毕竟&#xff0c;静态存量分析这本身就不符合现实&#xff0c;用现在的话说&#xff0c;建模就错了&#xff0c;但马尔萨斯的理论核心并不仅仅是一个模型&…

华为多路径软件UltraPath

检查多路径是否安装。 # rpm -qa|grep UltraPath 查看UltraPath软件版本 # upadmin show version 查看物理路径状态。 #upadmin show path 查看虚拟磁盘信息。 #upadmin show vlun 查看逻辑路径状态。 #upadmin show vlun 查看多路径配置。 #upadmin show upconfig 卸载Ul…

brew 安装MySQL 5.7

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…

php导出cvs,excel打开数字超过16变科学计数法

今天使用php导出cvs&#xff0c;在excel中打开&#xff0c;某一个字段是数字&#xff0c;长度高于16位结果就显示科学计数法 超过15位的话从第16位开始就用0代替了 查询了半天总算解决了就是在后面加上"\t" $data[$key][1] " ".$value[1]."\t";…

你的游戏项目有这些问题吗?

在移动游戏对高品质画面的要求不断增加的背景下&#xff0c;我们一直专注于移动设备GPU性能的优化&#xff0c;以确保您的游戏体验得以最佳展现。然而&#xff0c;不同GPU芯片之间的性能差异以及由此可能引发的GPU瓶颈问题使得优化工作更加具有挑战性。 因此&#xff0c;在不久…

Spring Boot中配置文件介绍及其使用教程

目录 一、配置文件介绍 二、配置简单数据 三、配置对象数据 四、配置集合数据 五、读取配置文件数据 六、占位符的使用 一、配置文件介绍 SpringBoot项目中&#xff0c;大部分配置都有默认值&#xff0c;但如果想替换默认配置的话&#xff0c;就可以使用application.prop…

Spring结合自定义注解实现 AOP 切面功能

Spring结合自定义注解实现 AOP 切面功能 Spring AOP 注解概述Aspect 快速入门execution 切点表达式 拦截指定类的方法Pointcut("annotation(xx)") 拦截拥有指定注解的方法环绕通知 实现开关目标方法案例1&#xff1a;自定义注解切面实现统一日志处理1.自定义日志注解…

uni-app:获取元素宽高

效果 代码 这里我定义的宽为500px,高为200排序,控制台输出的结果是502,202。原因是我设置了上下左右宽度各为1px的border边框导致 核心代码分析 // const query uni.createSelectorQuery();表示创建了一个选择器查询实例。通过这个实例&#xff0c;你可以使用不同的方法来选择…

英语——分享篇——每日100词——501-600

hill——will愿意——他不愿意去小山里 Easter——east东方(熟词)er儿(拼音)——东方的儿子都过复活节 exhibition——ex前夫(熟词)hi嗨(熟词)bition比神(谐音)——展览会上前夫很嗨&#xff0c;比神还开心 chase——vt.追捕&#xff0c;追逐&#xff0c;追赶——cha茶se色——…

【C++】vector的介绍 | 常见接口的使用

目录 vector的介绍 常见接口 构造函数 尾插push_back() vector的遍历 1.用方括号下标 遍历&#xff1a; 2.调用at()来访问&#xff1a; 3.用迭代器遍历&#xff1a; 4.范围for遍历&#xff1a; vector空间 vector增删查改 覆盖assign() 查找find() 插入insert() …

Java on Azure Tooling 8月更新|以应用程序为中心的视图支持及 Azure 应用服务部署状态改进

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division at Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎阅读 Java on Azure 工具的八月更新。在本次更新中&#xff0c;我们将推出新的以应用程序为中心的视图支持&#xff0c;帮助开发人员在一个项…

Spring修炼之路(1)基础入门

一、简介 1.1Spring概述 Spring框架是一个轻量级的Java开发框架&#xff0c;它提供了一系列底层容器和基础设施&#xff0c;并可以和大量常用的开源框架无缝集成&#xff0c;可以说是开发Java EE应用程序的必备。Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器&…

【面试经典 150 | 滑动窗口】串联所有单词的子串

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;两个哈希表方法二&#xff1a;滑动窗口 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一…