vue的全局事件总线

最新推荐文章于 2023-11-14 14:43:28 发布
最新推荐文章于 2023-11-14 14:43:28 发布
阅读量267 收藏
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45840857/article/details/127722373
版权

vue的全局事件总线

全局事件总线，是一个全局任意组件通信技术。

顾名思义，任意组件间通信，均可实现。

它通信是通过一个傀儡去实现的，一个所有组件均可访问到的傀儡，vue中命名叫 $bus

在vue2中

我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus

beforeCreate() {
   
	Vue.prototype.$bus = this
}

记得把钩子写在 挂载之前即可。

使用时：

  1. 在需要接收数据的组件中使用 mounted钩子绑定事件监听
mounted() {
   
  this.$bus.$on('hello',(data) =>
最低0.47元/天 解锁文章
hujang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
dax1-zyh#Steps-to-Master#Vue中全局事件总线（GlobalEventBus）的创建与使用方法1
07-25
全局事件总线一种组件间通信的方式，适用于任意组件间通信安装全局事件总线// 安装全局事件总线，$bus就是当前应用的vm使用全局事件总线接收数据A组件想要接收数
Vue3学习之全局事件总线mitt
m0_50789696的博客
06-07 4711
Vue3从实例中移除了 $on、$off 和 $once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库： Vue3官方有推荐一些库，例如 mitt 2 封装eventBus.js 3 使用事件总线工具 3.1 导入emitter 3.2 触发事件 3.2 监听事件 3.3 移除事件监听 所有监听移除 指定监听移除......
vue3组件通信之全局事件总线
m0_52222401的博客
05-22 1449
但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this，那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能。全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。点击组件2中按钮发送数据，组件1中接收。创建bus.ts文件引入mitt插件。可以使用插件mitt实现。
VUE3的全局事件总线
MCCLS的博客
07-14 2308
全局事件总线。
Vue全局事件总线
qq_67519713的博客
11-05 707
全局事件总线
[Vue]全局事件总线
emmmm.....
10-18 5750
1. 全局事件总线 2. $on() $off() $emit() 存放位置 3. 组件实例对象作为全局事件总线 4. Vue实例对象作为全局事件总线 5. 事件总线实现组件数据互传
vue-axios-interceptors：全局捕获和处理ajax响应
02-01
程序包注册一个新的全局事件总线，该事件在window对象上被intercepted ，并在ajax调用导致错误时在其上发出多个事件。 您可以轻松地侦听这些事件以构建流畅的错误处理工作流，例如在负责显示错误消息的全局组件中： ...
event-bus:简单事件总线
05-02
这样，我们可以确保拥有一个全局事件总线，而无需我们做任何事情。 也可以定义事件流。订阅事件： import EventBus from 'eventing-bus'const callback = ( name ) => { console . log ( `Hello, ${ name } !` ) } ...
vue-event-handler-VueJS的事件处理插件。-Vue.js开发
05-27
一个Vue.js插件，提供了全局事件总线和一些辅助方法。 适用于Vue 1.0和Vue 2.0。 安装1.）通过Vue.js插件安装软件包，该插件提供了全局事件总线和一些辅助方法。 适用于Vue 1.0和Vue 2.0。 安装1.）通过NPM安装...
vue2+vue3笔记
07-14
3.全局事件总线（较简单）、消息订阅与发布（更推荐全局事件总线）。 八、插槽 插槽是一种组件的特殊形式：父组件将自己的结构传给子组件，然后在子组件中规定的位置里插入；作用域插槽子组件可以给父组件传递数据...
vue2+vue3学习笔记
02-20
任意组件之间传递数据可以使用全局事件总线或消息订阅与发布。 插槽 插槽是一种组件的特殊形式，父组件将自己的结构传给子组件，然后在子组件中规定的位置里插入。作用域插槽子组件可以给父组件传递数据，必须采用...
vue全国志愿服务信息系统源码.zip
06-19
utils 全局工具类 （codeValue 代码值, bus:EventBus 事件总线, Cache: 内存缓存, LocalStorage: 封装的处理本地缓存数据的方法, upload：文件上传, config：全局上下文, publicMethods: 公共校验方法） permission ...
VUE常用方法整理.pdf
03-28
第四节 阐述vue单双向数据流及事件绑定 6 1. vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性) 6 2. vue双向数据流 v-model 只作用于有value属性的元素 7 3. 事件绑定v-on:事件名="表达式||函数名" 简写 @事件...
前端+vue2+todoList项目
07-26
该项目是一个非常简易的vu2项目,适合刚学习完vue2,或者是刚接触vue2的新手使用。项目虽然小，但是涉及了最常用的增删改查功能，以及各组件之间进行传数据的方式。...全局事件总线等，有一定的练手意义。
Vue学习笔记-全局事件总线
最新发布
theLuckyLong的博客
11-14 251
一种支持所有组件间的通信方式（原理：相当于提供一个全局对象，这个对象能够被任意组件访问到，并且这个对象能够调用Vue内置函数）3.1 数据接收方:需要绑定自定义事件,在组件即将销毁的时候，解除对应的事件绑定。最好在 beforeDestory( )钩子中使用$off方法解除自定义事件的绑定。
Vue中全局事件总线的使用(一看就会)
过去属于死神，未来属于自己
05-15 1866
例如：针对图中的A组件和B-a组件，它们既不是父子组件，也不是兄弟组件。此时，我们可以考虑使用全局事件总线进行值传递。具体使用方式如下:假设任意组件B中需要任意组件A中的某些数据B组件接收A组件的值，4个步骤:1. main.js中安装全局事件总线2. 组件A中用this.$bus.$emit('事件名'，val)发送要传的数据3. 组件B中用this.$bus.$on('事件名'，callback) 监听(接收)A传过来的数据。
Vue2——全局事件总线
mantou_riji的博客
07-20 1953
所以所有的组件实例对象都可以通过原型链找到Vue原型对象上的内容。当组件想要接收数据时在X上绑定自定义事件，编写事件回调函数。为保证所有组件都可以看到x，可以将x放在Vue的原型对象上。需要将赋值为vc（组件实例对象）或vm(vue实例对象)。当组件想要传递数据是去触发X上的事件，可以携带参数。School接收数据，Student组件发送数据。//该组件销毁时记得解绑，避免占用$bus的资源。全局事件总线︰可以实现任意组件间通信。在组件实例对象上可以直接调用。//绑定事件，编写回调函数。.........
【Vue全局事件总线详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-05 1万+
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。
vue全局事件总线获取属性
09-09
您可以使用Vue的全局事件总线来获取属性。首先，在您的Vue应用程序的入口文件或任何需要使用事件总线的地方，您需要创建一个Vue实例，并将其作为事件总线。 ```javascript // main.js or any other file where you create Vue instance import Vue from 'vue' // Create a new Vue instance as event bus export const EventBus = new Vue() ``` 然后，您可以在任何组件中导入该事件总线，并使用它来发布和订阅事件。 ```javascript // ComponentA.vue import { EventBus } from 'path/to/main.js' export default { created() { // 订阅事件 EventBus.$on('eventName', this.handleEvent) }, destroyed() { // 取消订阅事件，防止内存泄漏 EventBus.$off('eventName', this.handleEvent) }, methods: { handleEvent(data) { // 处理事件 console.log(data) // 打印获取的属性值 } } } ``` ```javascript // ComponentB.vue import { EventBus } from 'path/to/main.js' export default { methods: { someMethod() { // 获取属性，并通过事件总线发布事件 const attribute = 'someValue' EventBus.$emit('eventName', attribute) } } } ``` 在上面的示例中，`ComponentB.vue`通过事件总线将属性值发送给`ComponentA.vue`，然后在`ComponentA.vue`中处理该值。通过这种方式，您可以在不通过父子组件传递的情况下在不同组件之间共享属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值