首页 雷火电竞app正文

北京科技馆,Vue事情总线(EventBus)运用具体介绍-雷火体育

admin 雷火电竞app 2019-07-16 135 0

点击右上方赤色按钮重视“web秀”,让你真实秀起来

前语

vue组件十分常见的有父子组件通讯,兄弟组件通讯。而父子组件通讯就很简略,父组件会经过 props 向下传数据给子组件,当子组件有作业要告知父组件时会经过 $emit 作业告知父组件。今日就来说说假如两个页面没有任何引进和被引进联系,该怎么通讯了?

假如咱们的运用程序不需求相似Vuex这样的库来处理组件之间的数据通讯,就能够考虑Vue中的 作业总线 ,即 EventBus来通讯。

EventBus的简介

EventBus 又称为作业总线。在Vue中能够运用 EventBus 来作为交流桥梁的概念,就像是一切组件共用相同的作业中心,能够向该中心注册发送作业或接纳作业,所以组件都能够上下平行地告诉其他组件,但也便是太便利所以若运用不小心,就会形成难以保护的“灾祸”,因而才需求更完善的Vuex作为状况管理中心,将告诉的概念上升到同享状况层次。

怎么运用EventBus???

一、初始化

首要需求创立作业总线并将其导出,以便其它模块能够运用或许监听它。咱们能够经过两种办法来处理。先来看第一种,新创立一个 .js 文件,比方 event-bus.js

// event-bus.js 
import Vue from 'vue'
export const EventBus = new Vue()

实质上EventBus是一个不具备 DOM 的组件,它具有的仅仅只是它实例办法罢了,因而它十分的简便。

其他一种办法,能够直接在项目中的 main.js 初始化 EventBus :

// main.js 
Vue.prototype.$EventBus = new Vue()

留意,这种办法初始化的 EventBus 是一个 大局的作业总线 。稍后再来聊一聊大局的作业总线。

现在咱们现已创立了 EventBus ,接下来你需求做到的便是在你的组件中加载它,而且调用同一个办法,就如你在父子组件中相互传递音讯相同。

二、发送作业

假定你有两个Vue页面需求通讯: A 和 B ,A页面 在按钮上面绑定了点击作业,发送一则音讯,想=告诉 B页面。

 



接下来,咱们需求在 B页面 中接纳这则音讯。

三、接纳作业

 



同理咱们也能够在 B页面 向 A页面 发送音讯。这儿首要用到的两个办法:

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

// 监听接纳音讯
EventBus.$on(channel: string, callback(payload1,…))

前面提到过,假如运用不善,EventBus 会是一种灾祸,到底是什么样的“灾祸”了?咱们都知道vue是单页运用,假如你在某一个页面改写了之后,与之相关的EventBus会被移除,这样就导致事务走不下去。还要便是假如事务有重复操作的页面,EventBus在监听的时分就会触发很屡次,也是一个十分大的危险。这时分咱们就需求好好处理 EventBus 在项目中的联系。一般会用到,在vue页面毁掉时,一起移除EventBus 作业监听。

移除作业监听者

假如想移除作业的监听,能够像下面这样操作:

import { 
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})

你也能够运用 EventBus.$off('aMsg') 来移除运用内一切对此某个作业的监听。或许直接调用 EventBus.$off() 来移除一切作业频道,不需求增加任何参数 。

上面便是 EventBus 的运用办法,是不是很简略。上面的示例中咱们也看到了,每次运用 EventBus 时都需求在各组件中引进 event-bus.js 。事实上,咱们还能够经过其他办法,让作业变得简略一些。那便是创立一个大局的 EventBus 。接下来的示例向咱们演示怎么在Vue项目中创立一个大局的 EventBus 。

大局EventBus

它的作业原理是发布/订阅办法,一般称为 Pub/Sub 。

创立大局EventBus

var EventBus = new Vue(); 

Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})

在这个特定的总线中运用两个办法 $on 和 $emit 。一个用于创立宣布的作业,它便是 $emit ;另一个用于订阅 $on :

var EventBus = new Vue(); 

this.$bus.$emit('nameOfEvent', { ... pass some event data ...});

this.$bus.$on('nameOfEvent',($event) => {
// ...
})

然后咱们能够在某个Vue页面运用 this.$bus.$emit("sendMsg", '我是web秀');,另一个Vue页面运用

this.$bus.$on('updateMessage', function(value) { 
console.log(value); // 我是web秀
})

一起也能够运用this.$bus.$off('sendMsg')来移除作业监听。

总结

本文首要经过简略的实例学习了Vue中有关于 EventBus 相关的知识点。首要触及了 EventBus 怎么实例化,又是怎么经过 $emit 发送频道信号,又是怎么经过 $on 来接纳频道信号。最终简略介绍了怎么创立大局的 EventBus 。从实例中咱们能够了解到, EventBus 能够较好的完成兄弟组件之间的数据通讯。

喜爱小编或许觉得小编文章对你有协助的,能够点击一波重视哦!

雷火电竞版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

最近发表

    雷火体育_雷火电竞安卓app_雷火电竞2

    http://www.projuku.com/

    |

    Powered By

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    雷火电竞出品