vue通讯之vue-bus&&eventHub

最新推荐文章于 2022-11-28 23:15:00 发布

原创

最新推荐文章于 2022-11-28 23:15:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Vue中不同组件实例间的数据传递，重点讲解了vue-bus和eventHub的使用方法。vue-bus作为事件总线，通过引入并定义事件名实现数据传递。eventHub则利用Vue的依赖注入特性，通过provide和inject进行数据的提供与接收。文中还提到了这两个方法在不相关组件通信中的应用，并提供了相关资源链接。

不同组件实例之间的传递数据

1. vue-bus
vue中的bus事件，一般作为中央事件总线来使用

创建一个vue-bus.js

import Vue from 'vue'
const Bus = new Vue()
export {
   
    Bus }

在A,B组件中或者VUE实例中引入bus.js

    import {
   
    Bus } from 'bus'

3.在A组件（实例）中定义要调用B事件的bus事件名

    Bus.$emit('fnName'[,argument])

4.在B组件（实例）中调用C方法

    Bus.$on('fnName',callBack)

Bus.$on里有两个参数，第一个是在A组件定义的名字，第二个参数是一个回调函数，可以接受A传过来的参数
推荐vue-bus这个插件，地址:

最低0.47元/天解锁文章

新学期VIP享超值加赠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Memory Space

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 中使用Bus进行通信

疏影横斜水清浅

05-11

1011

1：在main.js中定义并挂在Bus const bus = new Vue(); Vue.prototype.$bus = bus 2:兄弟组件的调用： child1组件中：通过事件点击利用$emit来发送事件： <template> <div class="c1"> <input type="button" @click="sendMsg" value="兄弟组件1" /> </div> </template> <

Vue组件通信（非父子通信之Bus）

Dreamer_xr的博客

07-18

1654

我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父）今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用个空的 Vue 实例作为中央件总线（ bus ），也就是相当于一个中介。比如你需要租房子你可能会找房产中介来登记你的需求然后中介把你的信息发给满足要求的出租者...

参与评论您还未登录，请先登录后发表或查看评论

Vue组件通信之Bus

weixin_34326179的博客

12-27

169

关于组件通信我相信小伙伴们肯定也都很熟悉，就不多说了，对组件通信还不熟悉的小伙伴移步这里。在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是：因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者...

Vue - $eventHub

A_bad_horse的专栏

02-25

303

转载：https://www.cnblogs.com/GarsonZhang/p/12599348.html

Vue--EventHub

qq_41189996的博客

03-31

717

EventHub EventHub 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。 eventHub是什么？ eventHub以我理解，他有点像vuex，但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。但是作为组件之间的通信已经足够了，因为你用vuex不得不引用vuex，而且你还需要做不少的配置，在大型或者中型项目处理起来十分方便。但是一两个组件之间传递数据，或者组件比较少且不相关的情况下还要这样操作，需要使用EventHub eventHub功能 EventH

vue中的event bus非父子组件通信解析

08-29

vue中的event bus非父子组件通信解析 Vue中的Event Bus是实现非父子组件通信的一种有效方法。Event Bus是指一个中央事件总线，用于在不同的组件之间传递事件和数据。下面我们将对Event Bus的概念、实现和应用进行...

vue中实现在外部调用methods的方法(推荐)

11-28

首先，我们需要创建一个全局的事件总线（Event Bus），即一个公共的Vue实例，用于在不同组件之间传递消息。这可以通过新建一个Vue对象来完成： ```javascript // 定义一个公共的vue组件 var eventHub = new Vue(); ...

详解Vue2.0 事件派发与接收

08-29

Vue 2.0 事件派发与接收是其核心特性之一，用于组件间的通信。相较于Vue 1.0中移除的`$dispatch`和`$broadcast`方法，Vue 2.0推荐使用更为灵活的事件处理器。Vue 实例实现了事件分发接口，允许我们通过`$emit`、`$on...

vue采用EventBus实现跨组件通信及注意事项小结

11-30

const eventHub = new Vue(); Vue.prototype.$bus = { $on: eventHub.$on, $off: eventHub.$off, $once: eventHub.$once, $emit: eventHub.$emit, }; }; ``` 接下来，我们需要在主入口文件`main.js`中引入并...

vus-bus通信

qq_42077324的博客

08-23

506

vue中使用bus实现组件间通信

在vue项目中自定义事件总线eventHub

Bidding

01-03

881

由于在工作中vue的项目中使用了大量是全局事件总线广播，使得某些方法在某种情况下被重复多次调用，查看了一下原因，是因为在每个单文件组件中定义的事件接收器和事件广播器在页面销毁的时候没有注销导致的。于是在保证改动量不大的前提下，决定自定义一个全局事件总线文件。之前的使用是在 main.js 文件中 vue.prototype.$eventHub = vue.prototype.$eventHub || new Vue() 因此，重新定义一个文件 EventHub.js /** * Created

Vue 组件通信之 Bus

oZhaiHenZhai的博客

01-16

354

main.js var eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus); 监听的组件 // ... created() { this.$bus.$on('todoSth', (params) => { //获取传递的参数并...

vue组件之间实现数据传输（通过bus通信）

丑小鸭立志变天鹅的博客

08-19

652

vue组件之间实现数据传输（通过bus通信）

vue:通过bus（事件总线）任意组件之间通信

谷咕咕

02-21

582

vue:通过bus（事件总线）任意组件之间通信实现任意组件之间通信事件总线怎么说呢就是将大家的方法放到bus上，传数据的组件调用bus上的方法，然后带上要传的数据（有限像参数），然后接收方就可以拿到数据了。看了例子 1.定义数据总线 2.在app.vue中，有两个方法，需要用到孙子组件的值 3.孙子组件绑定总线上的方法，并且带上孙子组件上的数据。（例子中用的id） ...

vue使用bus进行组件通信

hsany330的专栏

06-11

979

bus utils - bus.js import Vue from 'vue' const bus = new Vue() export default bus 一、传值发送信息 import bus from '@/utils/bus' 第一个参数为标志变量，第二个参数为通信的值 bus.$emit('message', 'hello'); 接收信息 import bus from '@/utils/bus' 第一个参数为标志变量，第二个参...

vue零散记录之eventHub

小芳的专栏

12-03

312

eventHub 广播：使用场景：组件之间的迁就，例如，组件1的数据选择发生变化，组件2的某个场景也要相应切换知行： let eventHub = new Vue() // 监听疑问：创建监听需要在公共的父组件创建么 eventHub.$on('eventName', (data) => { console.log('Trigger this event and receive ' + data) }) // 广播 eventHub.$emit('eventName', da..

vue中使用bus通信传参

weixin_43549976的博客

07-15

1818

vue中使用$bus通信新建bus.js文件 import Vue from 'vue'; // 总线，一些组件间简单的数据交流通过它来进行，比如侧边栏折叠。过于复杂的数据推荐使用Vuex const bus = new Vue(); export default bus; demo1.vue 传值 //引入bus.js文件 import Bus from "@/views/common/bus.js"; methods:{ // 传值 handle(){ Bus.$emi

Vue组件通信之bus详解

kirinlau的专栏

11-28

3305

vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时，尤为好用，

掌握Vue.js中的Vuemit事件处理程序

var eventHub = new Vue({ events: { 'global-event'(data) { console.log(data); // 处理全局事件 } } }); ``` #### Vuemit 的优势和应用场景 - **解耦组件**：通过发布/订阅模式，组件不需要直接相互通信，...