vue组件间通信之兄弟组件通信($EventBus)

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>

<
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值