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.xdnf.cn/news/148447.html

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

相关文章

汽车电子——产品标准规范汇总和梳理(控制器)

文章目录 前言 一、电机控制 二、转向控制 三、制动控制 四、电池管理系统 五、充电系统 六、车身系统 七、通讯系统 总结 前言 见《汽车电子——产品标准规范汇总和梳理》 一、电机控制 《GB/T 18488.1-201X 电动汽车用电机及其控制器 第1部分&#xff1a;技术条件…

【Unity2022】Unity实现手机游戏操控摇杆(实现操控轮盘)

文章目录 运行效果预览创建物体脚本获取RectTransform处理玩家拖动事件完整代码 获取输入运行其他文章 运行效果预览 首先展示一下本文章实现的效果&#xff1a; 创建物体 创建两个UI图像&#xff0c;一个用于表示背景&#xff0c;作为父物体&#xff0c;命名为JoyStick&am…

zookeeper mac安装

目录 1.下载zookeeper安装包 2.解压安装包 3.修改配置文件 4.启动服务端 5.启动客户端 这边工作中用到了zookeeper组件&#xff0c;但自己独立安装弄的不太多&#xff0c;这边本机mac装一个做测试使用 以下是安装记录&#xff0c;可以作为参考 从以下链接zookeeper版本列…

【算法|动态规划No.10】leetcode LCR 089. 打家劫舍 LCR 090. 打家劫舍 II

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

RTC 时间、闹钟

实时时钟RTC是一个独立的定时器。RTC模块拥有一个连续计数的计数器&#xff0c;在软件配置下&#xff0c;可以提供时钟日历的功能。修改计数器的值可以重新设置当前时间和日期 RTC还包含用于管理低功耗模式的自动唤醒单元。 在掉电情况下 RTC仍可以独立运行 只要芯片的备用电源…

.balckhoues-V-XXXXXXX勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 勒索病毒已经成为网络犯罪者最喜爱的武器之一。其中&#xff0c;.balckhoues-V-XXXXXXX勒索病毒以其阴险的特性而著称。本文91数据恢复将深入探讨这个神秘的数字威胁&#xff0c;解析它的工作原理&#xff0c;以及如何保护自己免受其侵害。如果您正在经历勒索…

计算机毕业设计 基于SSM的民宿推荐系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装。 <template><view class"diygw-modal basic" v-if"showPrivacy" :class"showPrivacy?show:" style"z-index: 1000000"><view class"diygw-dialog diygw-dialog-modal bas…

计算机竞赛 车道线检测(自动驾驶 机器视觉)

0 前言 无人驾驶技术是机器学习为主的一门前沿领域&#xff0c;在无人驾驶领域中机器学习的各种算法随处可见&#xff0c;今天学长给大家介绍无人驾驶技术中的车道线检测。 1 车道线检测 在无人驾驶领域每一个任务都是相当复杂&#xff0c;看上去无从下手。那么面对这样极其…

VBA学习方法3.2.4:VBA中的查找操作

【分享成果&#xff0c;随喜正能量】一旦被欲望的毒箭射中&#xff0c;心会变得麻木&#xff0c;失去觉知&#xff0c;甚至疯狂。如果没有及时清醒&#xff0c;就会如同爱美的飞蛾扑向火焰、贪吃的鱼儿被鱼钩钓起&#xff0c;当发现自己身处险境时&#xff0c;后悔也来不及了。…

我的第一个react.js 的router工程

react.js 开发的时候&#xff0c;都是针对一个页面的&#xff0c;多个页面就要用Router了&#xff0c;本文介绍我在vscode 下的第一个router 工程。 我在学习react.js 前端开发&#xff0c;学到router 路由的时候有点犯难了。经过1-2天的努力&#xff0c;终于完成了第一个工程…

spring-cloud-alibaba-dubbo-issues1805修复

spring-cloud-alibaba-dubbo-issues1805修复 文章目录 [toc] 1.官方信息2.版本代码对比3.修改尝试4.验证5.总结 这个issue就是我这前写了那两篇文章的那个issue Dubbo重启服务提供者或先启动服务消费者后启动服务提供者&#xff0c;消费者有时候会出现找不到服务的问题及解决 …

Java泛型理解

什么是泛型&#xff1f; 我们都知道 Java 中有形参和实参之分&#xff0c;是在定义函数名和函数体的时候使用的参数,目的是用来接收调用该函数时传入的参数&#xff0c;其本身没有确定的值。在调用函数时&#xff0c;实参将赋值给形参。 而泛型是一种参数化的类型&#xff08…

以太网基础学习(四)——IP协议

一 、IP协议概述 IP&#xff08;Internet Protocol&#xff0c;互联网协议&#xff09;是互联网通信的基础协议&#xff0c;它负责将数据包从源地址传输到目的地址。IP协议定义了如何封装数据包&#xff0c;如何寻址数据包以及如何路由数据包&#xff0c;它是随着互联网的出现而…

Pytorch基础:Tensor的reshape方法

相关阅读 Pytorch基础https://blog.csdn.net/weixin_45791458/category_12457644.html?spm1001.2014.3001.5482 在Pytorch中&#xff0c;reshape是Tensor的一个重要方法&#xff0c;它与Numpy中的reshape类似&#xff0c;用于返回一个改变了形状但数据和数据顺序和原来一致的…

linux入门---信号的理解

目录标题 如何理解计算机中的信号如何查看计算机中的信号初步了解信号的保存和发送如何向目标进程发送信号情景一&#xff1a;使用键盘发送信号情景二&#xff1a;系统调用发送信号情景三&#xff1a;硬件异常产生信号情景四&#xff1a;软件条件产生信号 核心转储信号的两个问…

单调栈---基础数据结构与算法

简介 栈 (stack) 又名堆栈&#xff0c;是一种数据结构&#xff0c;向一个栈插入新元素又称作进栈、入栈或压栈&#xff0c;从一个栈删除元素又称作出栈或退栈。 栈是一种只允许在表尾进行插入和删除操作的线性表&#xff0c;也就是我们所说的后进先出&#xff0c;我们把栈想象…

【Linux】ping命令详解

目录 一、ping概述 二、Ping用法 三、ping参数详解 四、使用 五、Wireshark抓取ICMP请求应答消息 一、ping概述 ping 命令用于测试与目标主机之间的连接。它向目标主机发送一个ICMP&#xff08;Internet Control Message Protocol&#xff09;Internet控制报文协议回显请求…

知识图谱小白入门(1):neo4j的安装与CQL的使用

文章目录 序一、安装neo4j1.1 下载neo4j1.2 安装JDK1.3 BUG&#xff1a;dbms failed to start 二、CQL语法2.1 CQL语法创建节点查询节点创建关系查询关系2.2 习题 习题答案 序 知识图谱&#xff0c;是一种实体间的信息与关系知识的网状结构&#xff0c;借用图论中点与边的概念…

SLAM从入门到精通(用python实现机器人运动控制)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在ROS下面&#xff0c;开发的方法很多&#xff0c;可以是c&#xff0c;可以是python。大部分接口操作类的应用&#xff0c;其实都可以用python来开…