Vue事件总线(EventBus)

Vue事件总线(EventBus)

当vue组件之间进行通信时,比如父组件向子组件传值时用prop,子组件向父组件传递数值时用$emit。但是两个组件不是父子关系的时候要怎么通信呢?这个时候就可以用到事件总线(EventBus)了。

EventBus的介绍

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。

EventBus的使用

(一)首先创建一个event-bus.js文件

在这里插入图片描述

(二)在文件里面写入以上代码:


import Vue from 'vue';
// 创建事件总线并将其导出,以便其它模块可以使用或者监听它
// 不具备 DOM 的组件,它具有的仅仅只是它实例方法而已
export const EventBus = new Vue();

在组件使用EventBus

(一)先在组件里引入event-bus.js文件

import { EventBus } from '../modules/event-bus';

(二)发送事件

handleChange为事件名称,对象里面的是需要传递的{参数}


EventBus.$emit('handleChange', {
    rightData:this.rightData,
    inputValue: this.inputValue + '',
    inputShowValue: this.inputShowValue
}); // 事件总线

(三)接收事件

handleChange为事件名称,对象里面的是需要接收的{参数}


EventBus.$on("handleChange", ({rightData, inputValue, inputShowValue}) => {
    //console.log(rightData, inputValue)
    this.rightFormData[rightData] = inputValue;
    // console.log(this.rightFormData)
})

(四)关闭事件

全局定义的事件是不会跟随组件的生命周期函数进行状态改变的。切换路由时,如果不手动清除事件的话,它会注册多次,一次点击触发多次事件。
在每次创建事件之前,手动清除定义的事件(根据实际的业务需求也可以在beforeDestroy()和destroyed())


//在每次创建事件之前,手动清除定义的事件(根据实际的业务需求也可以在beforeDestroy()和destroyed())
EventBus.$off('handleChange');

END~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值