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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点#vue使用事件总线进行模块之间的通信相关的知识,希望对你有一定的参考价值。

       vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。而eventBus又称事件总线。在Vue中可以使用eventBus作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行的通知其他组件。

      事件总线也是一种通信方式,只不过它的功能比较强大,不在局限于父传子或兄弟组件之间通信,它可以跨组件通信,通过事件总线传递的值,不管哪个组件都可以获取到。

定义在组件中使用:

// 在组件中
import Vue from vue
export const EventBus = new Vue()

定义在全局中使用(main.js文件)

// 创建全局EventBus
Vue.prototype.$EventBus = new Vue()

var EventBus = new Vue()
Object.defineProperties(Vue.prototype,
$bus:
get: function ()
return EventBus


发送事件

​如果有两个组件之间需要通信,A组件与B组件 A组件中点击按钮发送了消息,想通知B组件

使用$emit发送信息

 <!-- A组件 -->
<template>
<button @click="sendMsg()">-</button>
</template>

<script>
export default
省略...
methods:
sendMsg()
EventBus.$emit("aMsg", 来自A页面的消息);


;

接收事件

​使用$on用来接收信息

 
<!-- B组件 -->
<template>
<p>msg</p>
</template>

<script>
export default
data()
return
msg:

,
mounted()
EventBus.$on("aMsg", (msg) =>
// A发送来的消息
this.msg = msg;
);

;

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

移除事件

// 移除指定的事件监听
EventBus.$off(aMsg, )
// 移除所有的事件监听
EventBus.$off()
  • 监听事件总线上的事件---调用 $on 方法
  • 触发事件总线上的事件---调用 $emit 方法
  • 取消监听事件总线上的事件---调用 $off 方法

我们可以借助 vue 示例来实现事件总线,也可以自行封装;我使用了第一种方法。

因此事件总线配置文件---​​eventBus.js ​​的代码如下:

import Vue from "vue";
const eventBus = new Vue();
/*
* 事件名:mainScroll
* 含义:主区域滚动条位置变化后触发
* 参数:
* - 滚动的dom元素,如果是undefined,则表示dom元素已经不存在
*/
//在Vue.prototype原型上注册事件总线,方便vue实例对象监听和触发
Vue.prototype.$bus = eventBus;
//导出事件总线,方便在其他js模块监听和触发事件总线上的事件
export default eventBus;

以上是关于#yyds干货盘点#vue使用事件总线进行模块之间的通信的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干货盘点#16.父子组件事件通信

#yyds干货盘点#vue的防抖

#yyds干货盘点#Python图像处理,cv2模块,OpenCV实现目标跟踪

#yyds干货盘点#Vuex实战讲解(全),玩转Vue必备知识

#yyds干货盘点#快速理解Vue组件化开发,干货太多,”建议收藏细品“

#yyds干货盘点#python使用技巧之文件与路径管理