全局事件总线

最新推荐文章于 2024-09-30 16:19:08 发布
最新推荐文章于 2024-09-30 16:19:08 发布
阅读量103 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70978159/article/details/130184019
版权
文章介绍了如何在Vue.js中解绑自定义事件，使用this.$off方法，以及在绑定事件时如何处理this指向问题。通过父子组件间的交互，阐述了全局事件总线的概念，它是实现组件间数据传递的一种方式。在main.js中创建并扩展Vue原型对象，实现了全局组件对象，使得所有组件都能访问该对象。
摘要由CSDN通过智能技术生成

解绑自定义事件：在触发事件中使用this.$off('事件名')

绑定自定义函数：在进行代码绑定的时候，this是子组件，用箭头函数是父组件

父组件进行绑定事件，子组件中进行触发。

全局事件总线原理

作用：用来在各个组件之间进行数据的传递。

实现：是运用父组件绑定事件和子组件触发事件进行实现的

父组件和子组件在绑定和触发事件的时候动用了子组件对象，由此可以想象设置一个全局组件对象每个组件都可以获取。

方法：在main.js中创建一个vc对象，再用prototype进行获取vue的原型对象，给原型对象扩展一个x属性，把vc赋给x，就可以在所有的组件中获取到这个vc，这个vc就充当了全局组件对象.

下面是为什么给原型对象附属性，所有组件都可以访问这个属性

 

柳贯
关注
全局事件总线 (GlobalEventBus)
iteval
09-12 419
一、一种组件间通信的方式，适用于任意组件间通信。 二、安装全局事件总线： new Vue({ ... BeforeCreate() { Vue.prototype.$bus = this; // 安装全局事件总线, $bus 就是当前的应用的 VueComponent 实例对象 } }) 三、使用事件总线 接收数据：A组件想接收数据，则A组件中给 $bus 绑定自定义事件，事件的回调在A组件中 methods() { demo(data) {...} } mounted() { this
全局事件总线 （GlobalEventBus）
qq_45909901的博客
04-25 79
全局事件总线 （GlobalEventBus）一种组件间通信的方式，适用于任意组件间通信。
vue2全局事件总线如何使用（$bus）
weixin_67002441的博客
06-05 960
Vue.prototype.$bus = this //安装全局事件总线，bus就是当前应用的vm。1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。2.提供数据: this.$bus.$emit('xxxx',数据)1.一种组件间通信的方式，适用于任意组件间通信。
vue全局事件总线的简单使用
www.passlink.cn
08-04 1716
在学习vue的过程中我感受到了他的强大和简便，只需按规则引入命令和扩展文件就可以让网页功能达到我们的预期效果。对于初学者来说是非常友好的。他的数据绑定，组件化思想，能很好的理解他的API（命令集合）。在众多API中，我非常喜欢他的组件之间传递数据的功能，有props父传子，$emit子传父，路由，全局事件，$refs引用指定组件实例等等，其中我非常喜欢的是全局事件和props/emit。...
Vue 全局事件总线
PinkCoder
08-07 734
Vue 全局事件总线
Vue-全局事件总线
m0_64081601的博客
03-23 2860
在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。
Vue全局事件总线
richest_qi的博客
02-21 1318
全局事件总线，是组件间的一种通信方式，适用于任何组件间通信。 看下面具体的例子。 父组件：App。 <template> <div class="app"> <Company/> <Employee/> </div> </template> <script> import Company from "./components/Company.vue"; import Em
全局事件总线概述
qq_52030824的博客
07-05 1017
Vue的全局总线分析
Vue-全局事件总线_vue 全局事件总线
2401_84446548的博客
04-29 894
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
node-singleton-event:由singlton事件发射器类驱动的全局事件总线
05-23
由singlton事件发射器类驱动的全局事件总线。 使用此模块可以将某些东西钩在其他对象中。 安装 npm install node-singleton-event -save 如何使用 在要与另一个文件进行通信的每个文件中都需要它。 说些什么： ...
全局事件总线（GlobalEventBus）
qq_54598736的博客
10-11 961
全局事件总线（GlobalEventBus）
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 786
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1158
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
最新发布
2301_77358195的博客
09-30 852
自定义指令
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 519
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1127
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
Vue.js组件开发教程
q903249871的博客
09-29 1195
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
vue2 全局事件总线
08-19
Vue.js 2 中的全局事件总线是一种简单的通信机制，它允许在不同的组件之间进行通信。通过全局事件总线，一个组件可以向其他组件发送事件，而其他组件可以监听这些事件并对其做出响应。 要使用全局事件总线，可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值