前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue实现一个eventBus

vue实现一个eventBus

作者头像
wade
发布2020-05-13 16:59:31
6370
发布2020-05-13 16:59:31
举报
文章被收录于专栏:coding个人笔记

eventBus应该有些听过,其实就是一个事件发布订阅的功能。vue提供了实例方法事件,就是on、once、off、emit。

在mainjs里面在vue原型上面挂载一个变量:

Vue.prototype.$eventBus = new Vue();

我在home页面注册了一个事件:

this.eventBus.on('home', (msg) => { console.log('home:' + msg);})

这个事件名字就是一个key,发布的时候需要用到。

接着我在另外一个页面live进行发布:

this.eventBus.emit('home', '这是live emit')

发布订阅要有个先后顺序,一定要先订阅,发布才会触发,比如父组件mounted里面注册,子组件触发,但是子组件生命周期先执行,父组件也不会触发。你先进入home进行订阅,接着切换到live,控制台输出:

home:这是live emit

如果我在back页面也注册一个home事件:

this.eventBus.on('home', (msg) => { console.log('back:' + msg);})

然后切换页面,每一个事件名为home的都会执行:

home:这是live emit

back:这是live emit

而且会严格按照注册顺序执行。

要注意的是,进入页面就注册事件,那么你每进入一次就会注册一次,就是说我在home和back来回切换几次,就会注册几次,然后跳转live页面就会同时执行:

home:这是live emit

back:这是live emit

home:这是live emit

back:这是live emit

在一定的业务逻辑上面,我们如果不需要使用某个事件,最好移除:

this.eventBus.off('home');

要注意,这个方法会把所有注册的home事件移除,不管注册几次。包括$once事件也会移除。

$once事件是只执行一次,相当于执行完之后执行off事件。

通过vue提供的api,很容易实现一个事件的发布订阅,基本的on、off、once、emit都很容易就实现了。在某些逻辑下还能当作组件间传递数据来使用。之后应该会分享自己去实现这样一个api。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档