ToDoList使用自定义事件传值

news2024/10/6 22:21:29

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.coloradmin.cn/o/1062976.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新款UI动态壁纸头像潮图小程序源码

新款UI动态壁纸头像潮图小程序源码&#xff0c;不需要域名服务器&#xff0c;直接添加合法域名&#xff0c;上传发布就能使用。 可以对接开通流量主&#xff0c;个人也能运营&#xff0c;不需要服务器源码完整。整合头像&#xff0c;动态壁纸&#xff0c;文案功能齐全。 源码…

代码随想录Day12 二叉树 LeetCode T102二叉树的层序遍历 T226 翻转二叉树 T101 对称二叉树

本文思路和详细讲解来自于:代码随想录 (programmercarl.com) LeetCode T102 二叉树的层序遍历 题目链接:102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 本题使用队列辅助完成,讲解主要函数CheckOrder:首先判断root是否为空,是就直接返回,然后创建…

芯驰D9评测(3)--建立开发环境

1. 建立交叉编译链接环境 官网下载的SDK包中就有交叉工具链&#xff0c;米尔提供的这个 SDK 中除了包含各种源代码外还提供了必要的交叉工具链&#xff0c;可以直接用于编译应用程序等。 用户可以直接使用次交叉编译工具链来建立一个独立的开发环境&#xff0c;可单独编译…

发光文字跟随鼠标

效果展示 CSS / JavaScript 知识点 background-image 绘制网格背景filter 属性的运用onmousemove 事件运用getBoundingClientRect 方法的运用 实现页面基础结构 <!-- 光标 --> <div class"cursour"></div>实现网格背景样式 body {min-height: …

如何用 Tana AI 一站式批量润色整理音频笔记?

&#xff08;注&#xff1a;本文为小报童精选文章&#xff0c;已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09; 用好 Tana AI Builder &#xff0c;充分体验和发挥 AI 工作流的强大性能。 痛点 作为一个足够懒惰的写作者&#xff0c;我对音频转文本这事儿…

智慧公厕如何实现?

随着城市化进程的加速&#xff0c;人们对公共设施的需求也日益增长。而公厕&#xff0c;作为城市基础设施的一部分&#xff0c;扮演着重要的角色。然而&#xff0c;传统的公厕存在着诸多问题&#xff0c;例如管理不善、环境脏乱等&#xff0c;给人们的生活带来了不便。为了改善…

笔试强训Day13

T1&#xff1a;跳石板 [小易来到了一条石板路前&#xff0c;每块石板上从1挨着编号为&#xff1a;1、2、3....... 这条石板路要根据特殊的规则才能前进&#xff1a;对于小易当前所在的编号为K的 石板&#xff0c;小易单次只能往前跳K的一个约数(不含1和K)步&#xff0c;即跳…

【LeetCode刷题笔记】双指针

剑指 Offer 21.调整数组顺序使奇数位于偶数前面 解题思路&#xff1a; 对撞指针 &#xff0c; 从左边不停的找第一个偶数&#xff0c;从右边不停的找第一个奇数 &#xff0c;找到后 交换 两者位置 本题与【905. 按奇偶排序数组】几乎雷同。 剑指 Offer 57.和为s的两个数字 本题…

SpringCloud-消息组件

1 简介 了解过RabbitMQ后&#xff0c;可能我们会遇到不同的系统在用不同的队列。比如系统A用的Kafka&#xff0c;系统B用的RabbitMQ&#xff0c;但是没了解过Kafka&#xff0c;因此可以使用Spring Stream&#xff0c;它能够屏蔽地产&#xff0c;像JDBC一样&#xff0c;只关心SQ…

超聚变安装银河麒麟服务器系统ky10-server-x86

超聚变-通过BMC口进服务器管理界面 如下图为BMC管理口&#xff1a; 默认BMC口IP&#xff1a;https://192.168.2.100 l浏览器打开网页&#xff0c;输入用户名和密码 登陆后&#xff0c;如下图红框处&#xff0c;选择“启动虚拟控制台”——选择“HTML集成远程控制台” 系统银河麒…

绘画的颜料

Alcohol Ink 酒精油墨 酒精墨水风格是一种绘画技术&#xff0c;使用酒精为基础的墨水创造出充满活力和丰富多彩的设计。 墨水是半透明的&#xff0c;可以分层以达到深度和复杂性。 Alcohol ink painting of a husky, side viewAcrylic 丙烯颜料 色彩鲜艳的多功能涂料。它可以…

基于Java的蛋糕甜品系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&…

Seata 源码篇之AT模式启动流程 - 下 - 04

Seata 源码篇之AT模式启动流程 - 下 - 04 全局事务提交分支事务全局提交全局事务回滚分支事务全局回滚小结 本系列文章: Seata 源码篇之核心思想 - 01Seata 源码篇之AT模式启动流程 - 上 - 02Seata 源码篇之AT模式启动流程 - 中 - 03 上一篇文章&#xff0c;我们看了Seata AT…

全志ARM926 Melis2.0系统的开发指引⑧

全志ARM926 Melis2.0系统的开发指引⑧ 编写目的12.5. 应用程序编写12.5.1. 简单应用编写12.5.1.1. 注册应用12.5.1.2. 创建管理窗口12.5.1.3. 实现管理窗口消息处理回调函数12.5.1.4. 创建图层12.5.1.5. 创建 framewin12.5.1.6. 实现 framewin 消息处理回调函数 -. 全志相关工具…

JavaScript系列从入门到精通系列第十五篇:JavaScript中函数的实参介绍返回值介绍以及函数的立即执行

文章目录 一&#xff1a;函数的参数 1&#xff1a;形参如何定义 2&#xff1a;形参的使用规则 二&#xff1a;函数的返回值 1&#xff1a;函数返回值如何定义 2&#xff1a;函数返回值种类 三&#xff1a;实参的任意性 1&#xff1a;方法可以作为实参 2&#xff1a;将匿…

Next.js 入门笔记

前言 之前初步体验了 React 的魅力, 又看文档理解了一下 useState 和 useEffect, 目前初步理解的概念是: useState 用来声明在组件中使用并且需要修改的变量 useEffect 用来对 useState 声明的变量进行初始化赋值 可能理解的不太准确, 不过大概差不多是这么个意思. 但是再往后…

Qt之显示PDF文件

之前使用过mupdf库&#xff0c;能够成功显示pdf&#xff0c;但是我用着有BUG&#xff0c;不太理解它的代码&#xff0c;搞了好久都不行。后面又试了其他库&#xff0c;如pdfium、popler、下载了很多例程&#xff0c;都跑不起来&#xff01;后面偶然得知xpdf库&#xff0c;看起来…

【C++设计模式之建造者模式:创建型】分析及示例

简介 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它将复杂对象的构建过程与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 描述 建造者模式通过将一个复杂对象的构建过程拆分成多个简单的部分&#xff0c;并由不同…

华为云云耀云服务器L实例评测|部署个人音乐流媒体服务器 navidrome

华为云云耀云服务器L实例评测&#xff5c;部署个人音乐流媒体服务器 navidrome 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 产品规格1.3 产品优势1.4 支持镜像 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 navidrome3.1 navidrome 介绍3.…

全志ARM926 Melis2.0系统的开发指引⑦

全志ARM926 Melis2.0系统的开发指引⑦ 编写目的11. 调屏11.1. 调屏步骤简介11.1.1. 判断屏接口。11.1.2. 确定硬件连接。11.1.3. 配置显示部分 sys_config.fex11.1.3.1. 配置屏相关 IO 11.1.4. Lcd_panel_cfg.c 初始化文件中配置屏参数11.1.4.1. LCD_cfg_panel_info11.1.4.2. L…