vue 事件总线EventBus的概念、使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 事件总线EventBus的概念、使用相关的知识,希望对你有一定的参考价值。

参考技术A 两个组件之间毫无关系,用到 vue 中的事件总线 EventBus的概念来传递数据

EventBus又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件

因为是全局的一个'仓库',所以初始化要在全局初始化(main.js)

有两个组件A和B需要通信,他们不是父子组件关系,B事件需要获得A事件里的一组数据data

A组件已经向全局事件总线EventBus发送了一个aMsg事件,这时B组件就可以去aMsg监听这个事件,并可以获得一些数据。

原文链接: https://blog.csdn.net/starzhou/article/details/119793562

Vue开发中的中央事件总线

  在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案。比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex。但是,对于一些简单的项目里的非父子组件来说,它们一方面不适用props,另一方面又没有必要使用Vuex,针对这种情形可以使用中央事件总线(Event Bus)来解决问题。

1、创建中央事件总线

可以使用多种形式创建Event Bus。

Example 1:

// main.js
import Vue from ‘vue‘;
window.eventBus = new Vue();   // 注册全局事件对象
// 也可以修改Vue的原型链
Vue.prototype.$event = new Vue();

Example 2:

// ./event/moduleEvent.vue
<tempalte>
</template>
<script>
    import Vue from ‘vue‘;
    export default new Vue({
        data () {

        }
    })
</script>
// main.js
import moduleEvent from ‘./event/moduleEvent‘;
Vue.prototype.$event = moduleEvent;

Example 3:

// Example 2 中的创建eventBus的vue文件改为js文件,main.js不变
// ./event/moduleEvent.js
inport Vue from ‘vue‘;
export const moduleEvent = new Vue();
// main.js
import moduleEvent from ‘../event/moduleEvent‘;
Vue.prototype.$event = moduleEvent;

2、使用中央事件总线传值

先在组件A中发射事件:

// moduleA.vue
methods: {
    sendData () {
        // 通过修改Vue原型链的方式注册
        this.$event.$emit(‘dataFromA‘, this.dataA);
        // 直接注册在window上
        // moduleEvent.$emit(‘dataFromA‘, this.dataA);      
    }
}

然后就可以在组件B中接收了。组件B可以与组件A是父子、兄弟等等任意关系。

// moduleB.vue
methods: {
    getData () {
        // 通过修改Vue原型链的方式注册
        this.$event.$on(‘dataFromA‘,  function (data) {
            // handle data code
            // 回调函数的参数data即为组件A传递的值
        });
        // 直接注册在window上
        // moduleEvent.$emit(‘dataFromA‘,  function (data) {
            // handle data code
            // 回调函数的参数data即为组件A传递的值
        // });      
    }
}

3、单次接收事件或者移除事件Listeners

如果你只想监听一次该事件。可以使用 this.$event.$once(channel: string, callback(payload1, payload2, ...)),事件触发一次后将移除事件。

如果你想移除自定义事件监听器,你可以使用  this.$event.$off([event, callback]); 来实现。该方法如果没有提供参数,则移除所有的事件监听器;如果只提供事件,则移除该事件所有的监听器;如果同时提供了事件与回调,则只移除这个回调的监听器。


以上是关于vue 事件总线EventBus的概念、使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue中 事件总线(eventBus)使用

Vue事件总线(EventBus)

vue事件总线EventBus

Vue eventBus 事件总线

Vue eventBus 事件总线

#yyds干货盘点#vue使用事件总线进行模块之间的通信