vue组件间通信之兄弟组件通信($EventBus)
vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件;子传父通过$emit发送事件,并携带数据给父组件。而有时两个组件之间毫无关系,或者他们之间的结构复杂,如何传递数据呢?这时就要用到
vue 中的事件总线 EventBus的概念
EventBus的简介
EventBus又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件
EventBus的使用
初始化
要用EventBus,首先要在main.js中初始化一个EventBus,这里称它为全局事件总线。
Vue.prototype.$EventBus = new Vue();//全局注册一个事件总线
接收事件和发送事件
发送事件的语法:this. E v e n t B u s . EventBus. EventBus.emit(发送的事件名,传递的参数)
接收事件的语法:this. E v e n t B u s . EventBus. EventBus.on(监听的事件名, 回调函数)
见下方示例
ceshi.vue
<template>
<div>
<PageA></PageA>
<hr>
<PageB></PageB>
</div>
</template>
<