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

创创精灵 lv.1

发布时间：2022-11-15 11:16:03 243

相关标签： # webkit# 数据# 信息

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页面的消息');
    }
  }
};

文章来源： https://blog.51cto.com/u_11365839/5847991

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。