ToDoList使用自定义事件传值

最新推荐文章于 2024-10-01 12:49:02 发布
最新推荐文章于 2024-10-01 12:49:02 发布
阅读量1k 收藏
点赞数
文章标签： 学习 笔记 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55355282/article/details/133417472
版权
本文介绍了如何在Vue应用中，使用自定义事件如`addTodo`替换传统的props数据传递，从MyTop组件向App传递数据，以及注意事项，如MyFooter组件中的todos数据不能作为事件。并通过TodoList案例展示了新方法的使用。
摘要由CSDN通过智能技术生成

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

隐藏用户y
关注
使用vuex对兄弟组件传值_vue兄弟组件之间的传参
weixin_39550937的博客
12-21 448
问题描述使用vue以来，一直都没有考虑过兄弟组件之间的通信，那么问题来了，兄弟组件之间如何传递数据了？问题描述.png准备工作使用vue-cli构建项目vue-cli构建工具.png生成的目录结构生成的目录结构.png例子的其他功能不做描述，只对兄弟组件这部分做分析使用eventBus解决问题eventBus的核心理论我也不太清楚。这里对如何使用做下说明1.创建一个空Vue对象import Vue...
Vue基础14之TodoList组件自定义事件、全局事件总线、TodoList全局事件总线
qq_34306228的博客
02-21 925
App.vue Header.vue Footer.vue App.vue MyHeader.vue MyFooter.vue 使用一个中间者x组件作为桥梁，实现任意组件之间能够通信 main.js 实现Student.vue与School.vue组件之间通信 School.vue Student.vue Vue原型身上的$on,$off,$emit不仅VC能调用到，Vm也可以 但是以下写法会报错： 因为new Vue代码执行完毕后，意味着整个App组件（包括子组件School）都放到页
Vue3.0实现todolist之父子组件之间传值
祈澈菇凉
09-28 472
1:首先在views底下新建一个detail组件 <template> <div> <h1>我是detail组件</h1> <child></child> </div> </template> <script> import { ...
组件自定义事件（解绑）+TodoList中嵌入自定义事件+全局事件总线+Vue中消息的订阅与发布+$nextTrick的使用，尚硅谷Vue系列教程学习笔记（9）
weixin_43749999的博客
08-29 537
尚硅谷Vue系列教程学习笔记（9），主要内容包含如下： 081-组件自定义事件-解绑 082-组件自定义事件-总结 083-TodoList-自定义事件 084-全局事件总线1 085-全局事件总线2 086-TodoList案例-使用事件总线 087-消息订阅与发布 088-TodoList案例-使用消息订阅和接收方法实现 089-TodoList案例-编辑 090-$nextTrick...
Vue父子组件传值，自定义组件实现TodoList
xqiitan的专栏
08-01 350
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&g...
ToDoList全局事件总线学习笔记
weixin_55355282的博客
10-21 295
全局事件总线：任意组件间通信。
框架技术 ----Vue的props验证和自定义事件
a23452的博客
03-13 3418
Vue框架 内容管理props验证对象类型的pros结点props验证计算属性 computed计算属性 --- 方法计算属性案例自定义事件自定义事件使用步骤声明自定义事件 emits触发自定义事件 this.$emits('name')父组件监听自定义事件自定义事件传参组件的v-model组件上使用v-model父传子子传父任务列表案例 Vue3基础：组件化开发 前面简单介绍了组件化的思想和SPA，组件的注册，还有组件的style和css等的绑定，而关于深度的组件化的概念： 比如计算属性，props
2023/1/9 Vue学习笔记 -TodoList案例 -【props】最初的父传子 子传父值 && localStorage sessionStorage && 组件自定义事件
一个搬砖工人
01-08 518
1 ）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。2 ）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：一个组件在用：放在组件自身即可。一些组件在用：放在他们共同的父组件上（状态提升） 3 ）实现交互：从绑定事件开始。1 ）父组件 == > 子组件 通信 2 ）子组件 == > 父组件 通信 （要求父先给子一个函数）3.使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
组件、创建Vue脚手架、render函数、ref配置、mixin混入、scope样式、TodoList案例、组件的自定义事件、全局事件总线、消息订阅与发布、过度与动画——使用 Vue 脚手架
weixin_70320000的博客
03-15 464
组件、创建Vue脚手架、render函数、ref配置、mixin混入、scope样式、TodoList案例、组件的自定义事件、全局事件总线、消息订阅与发布、nextTick、过度与动画——使用 Vue 脚手架
Vue不同单页面之间传值/兄弟组件传值
reaaal的博客
06-17 2872
eventBus 对于非父子组件的传值，如果不是项目很大很复杂，使用eventBus方法来实现传值。这种方法通过一个空的Vue实例作为中央事件中心，用他来触发事件和监听事件。具体步骤如下： 新建一个Vue实例。比如新建一个Bus文件夹。下面是index.js。在需要进行传值的页面读引入这个Bus文件夹。 import Vue from 'vue' export default new Vue 在需要传值的页面（组件）内通过$emit来触发一个自定义事件。 Bus.$emit("getCourse"
Vue3.0实现todolist
ll666888999的博客
03-31 1594
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
Vue2 组件传值
weixin_47606392的博客
07-06 411
Vue2 组件传值 组件之间通信
今天通过一个todolist的案例，兼顾了很多学过的知识点
WANG944282的博客
04-12 329
todolist案例 写案例的流程： 拆分组件，想清楚分多少部分（按照功能点拆分），每个部分控制的功能，实现静态组件 展示动态效果，考虑存放位置，使用情况： 一个组件用，放在自身 多个组件在用，放在他们共同的父组件身上（状态提升） 进行交互 点击勾选和取消勾选，两种实现方式： 给点击事件绑定处理函数并传id。@click=“handeleCheck(todo.id)” 也可以绑定change事件。@change=“handeleCheck(todo.id)” <input
vuejs中的组件以及父子组件间通信传值
itclanCoder
05-10 1509
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊(您有任何疑问,都可以进行提问,我们一起探讨)前言...
H.264学习笔记
zfenggo的博客
09-26 808
H.264凭借其出色的压缩效率、灵活的编码方式以及高质量的视频表现，成为了现代视频技术的核心标准之一。它不仅减少了存储需求，还提高了流媒体和实时视频传输的可行性。对于从高清到超高清视频，H.264的编码能力仍然广泛适用。H.264的帧结构设计（I帧、P帧和B帧）极大地提高了视频编码的压缩效率。I帧保存完整的图像信息，P帧通过参考之前的帧减少冗余数据，而B帧则通过双向参考提供进一步的压缩优势。这种帧间的协同工作大幅降低了带宽需求和存储成本，同时保持了视频的高质量。NALU头。
2024-2025华为ICT大赛报名｜赛前辅导｜学习资料
qq2859066538的博客
09-25 309
华为ICT大赛是华为公司打造的面向全球高校的年度ICT赛事，大赛以“联接、荣耀、未来”为主题，协同政府、高等教育机构、培训机构和行业企业，促进高校ICT人才培养、成长和就业，助力ICT人才生态繁荣。华为ICT大赛2023-2024实践赛涵盖网络、云、计算（第九届华为ICT大赛更名为基础软件）和昇腾AI四个赛道。为有效帮助参赛者把握命题思路、突破重点内容、检验学习效果、提高实战经验，更充分地备战大赛，华为首次推出华为ICT大赛2023-2024实践赛真题实战系列课程，为您铺就通往大赛的成功之路。
从0学习React（3）
qq_54432917的博客
09-29 556
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
【DirectX sdk 学习使用】
最新发布
qq_41610493的博客
10-01 263
设置包含目录：打开你的项目属性，导航到VC++目录，然后在包含目录中添加DirectX SDK的Include文件夹路径。设置库目录：同样在VC++目录中，在库目录中添加DirectX SDK的Lib文件夹路径。运行安装程序：下载完成后，找到下载的安装程序（通常是一个.exe文件），双击运行。选择安装路径：选择你希望安装DirectX SDK的路径，或者使用默认路径。如果你有任何问题或需要进一步的指导，请随时告诉我。接受许可协议：在安装向导中，阅读并接受许可协议。完成安装：点击“安装”按钮，等待安装完成。
mitt传值todolist
07-28
3. 在需要传递值的地方，使用 `emitter.emit` 方法发送事件，并传递需要的值。 ```javascript emitter.emit('updateToDoList', newValue); ``` 4. 在接收值的地方，通过 `emitter.on` 方法监听事件，并处理传递的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

隐藏用户y

虽然不是很有才华，但是渴望打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值