vue TodoList 案例 （对父组件到孙组件传递）用全局事件总线实现

最新推荐文章于 2025-10-06 05:52:17 发布
原创 最新推荐文章于 2025-10-06 05:52:17 发布 · 235 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

这篇博客介绍了如何在 Vue.js 应用中使用事件总线（Event Bus）来实现实现父子组件及跨层级组件之间的数据传递。首先在 main.js 中创建全局事件总线，然后在父组件（app.vue）中监听事件，最后在孙子组件中触发事件并传递参数。这种方法避免了传统 props 传递的限制，成功实现了页面效果。

 

这边主要修改对子孙子组件对爷爷组件进行数据传递,

在main.js上定义一个全局事件总线 

1.Vue.prototype.$bus=this

 

2.在需要接受到数据的总线上给$bus绑定自定义事件

即我们这边的app.vue父组件上这样写,前面的props传递方法也就不需要写了

3.在要提供数据的组件上（即这边的孙子组件）定义触发$bus的对应事件,并触发时传入参数

 

 页面效果实现了

 

 

 

 

Vue2（十）：全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画
weixin_42044763的博客
08-25 1435
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的，而这个用来接收数据的组件实例A都销毁了，回调函数也没了，那这个xxxx自定义事件也就没用了，你留着会污染全局环境（这块儿有点迷糊）这玩意儿用的不多，和全局事件总线写法差不多，但是全局事件总线更好，因为是在Vue身上操作，但是这个的话要引入第三方库，库有很多，比如pubsub-js。，那每次点击编辑按钮，都会添加一次isEdit属性，这样是不太好的，所以要加个判断，添加过了就改成true，没添加过就添加个true。，而且原来的span要隐藏。...
Vue06 全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 github案例
weixin_58562753的博客
03-13 1634
全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 过度效果 配置代理_方式一二 github案例
vue 父组件调用子组件方法及事件
01-19
情景: 　　父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 　　父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 　　父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 　　设想思路:点击父组件中的按钮触发子组件中上传方法: 　　子组件上定义ref=refName,父组件的方法中用this.$refs.refName.method去调用子组件方法 　　子组件中处理上传的方法:　　 fileClick(index) { console.log('子组件的fileClick被调用了')
Vue 全局事件总线
Errol's Blog
04-10 8550
Vue 全局事件总线
Vue 事件总线（EventBus）详解
最新发布
csdn_silent的博客
10-06 1285
事件总线是一个发布-订阅模式的实现，它允许组件之间通过事件进行通信，而不需要直接引用对方。
Vue事件总线（Event Bus）
2305_79303633的博客
07-28 879
前端小白日常分享
Vue事件总线（EventBus）
camille009的博客
04-06 202
https://zhuanlan.zhihu.com/p/72777951
Vue-事件总线
zzming的博客
09-08 412
1.定义 ​ 1.一种组件间通信的方式，适用于任何组件间通信 ​ 2.事件总线实际上就是定义一个全局变量将其挂载在Vue实例上，在Vue实例中需要在其生命中期中的beforeCreate中将事件总线挂载在Vue实例上，如果在创建实例之间挂载，则此时实例不存在，无法挂载，如果在创建实例之后挂载，此时页面已经渲染完成，挂载已经不生效 ​ 3.安装全局事件总线 new Vue({ ... beforeCreate(){ //将事件总线挂载在Vue实例上 Vue.prototype.$bus
精选资源
实现TodoList案例
06-11
在这个案例中，我们将关注三个主要的交互方式：通过props从父组件向子组件传递数据，通过自定义事件从子组件向父组件传递数据，以及利用全局总线实现兄弟组件间的通信。 首先，让我们详细探讨一下`props`。在Vue.js...
Vue.js TodoList案例实战：props父子通信与全局总线
具体知识点包括使用props实现父子组件之间的数据传递、使用自定义事件实现子组件向父组件传递数据、以及使用全局总线实现兄弟组件之间的通信。" 在Vue.js中，组件是构建应用的基础单元，而组件间的数据传递和通信是...
09-Vue技术栈（TodoList案例）
Zhang_wang_yun的博客
05-06 1838
基于Vue开发的一个记事本待办事项案例
vue事件总线
qq_47880276的博客
05-01 524
vue事件总线
Vue中 事件总线（eventBus）详解及使用
热门推荐
明天也要努力的博客
03-06 1万+
传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门：Vue状态管理器（vuex）详解及应用场景 传送门：Vue中 $ attrs、$ listeners 详解及使用 1. 简介 Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？ 如果应用程序不需要类似 Vuex 这样的库来处理组件之
vue改变子组件从父组件传值时，报错:【 Avoid mutating a prop directly since the value will be overwritten whenever】
闫小样丶的博客
10-27 843
今天在写组件中从父组件中通过props传值之后，在methods中对子组件的值进行重新赋值时候报出错误。 代码所示： Vue.component("opportunity-list-component",{ props: {//这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件 activeTypeIndex: { ...
Vue事件总线
热爱前端的大宝同学。
06-05 2091
主要总结了Vue事件总线模式的基本概念、实现方案、核心API、架构设计和实践案例等内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值