vue-happy-bus
v1.0.3
Published
Event Bus for Vue2. automatically cancel listening events when destroyed.
Downloads
110
Readme
vue-happy-bus
此版本只适用 vue2.x 版本。如果在 vue3 中运行请查看vue-happy-bus@next
vue-happy-bus 是干嘛的
vue-happy-bus
是一款基于vue实现的订阅/发布
插件。
我们通常在使用非父子组件
间通信时,采用new Bus()
的方式来做一个事件广播
。
但一个弊端就是,这种方式并不会自动销毁,所以为了避免回调函数重复执行,还要在destroyed
周期中去做Bus.$off('event name', fn)
的操作。
这样带来的冗余代码就是:
- $on 的回调函数必须是具名函数。不能简单的
Bus.$on('event name', () => {})
使用匿名函数作为回调了,所以需要将回调函数放到metheds
中进行额外的声明
- 在
destroyed
生命周期中去销毁事件的监听。
我只是想在某个路由中监听下 header 中一个按钮的点击事件而已,竟然要这么麻烦???
所以此轮子被造出来了 🤘。
它主要解决在非父子组件
间通信时,解决重复绑定事件、无法自动销毁的而导致回调函数被执行多次
的问题。
总得来说他是能让你偷懒
少写代码的工具。
安装
- npm
推荐使用
npm
,这样可以跟随你的webpack
配置去选择怎样打包。
npm i -D vue-happy-bus
- CDN
<html>
<script src="https://unpkg.com/vue-happy-bus/dist/happy-bus.min.js"></script>
</html>
如何使用
自动注销监听事件的方式:
import BusFactory from 'vue-happy-bus'
export default {
data () {
return {
bus: BusFactory(this) // 使用BusFactory将this绑定之后,返回一个 bus,即可无需关心销毁的问题了
}
},
created () {
// 在生命周期中进行 $on
this.bus.$on('event name', () => {
// do something
})
// 当使用 $once 与 $emit 可直接在BusFactory使用
BusFactory.$once('event name', () => {
// do something
})
BusFactory.$emit('event name', '参数')
}
}
或者你也可以只引入 new Vue()
后的 Bus
。
它不会像 BusFactory 那样自动注销 $on
的事件。
因为当你在某些插件中想要使用
bus
的时候,这些插件并不是 vue 组件,所以没有 this, 也没有 destroyed 函数。
import { Bus } from 'vue-happy-bus'
// ...
Bus.$on('type', 'handler')
// 在适当的时候,需要手动注销
Bus.$off('type', 'handler')
如果你只需要 $emit
也可以只引用 Bus
import { Bus } from 'vue-happy-bus'
Bus.$emit('type') // Bus.$emit 也会通知到通过 BusFactory.$on 的函数
属性
bus 只包含4个方法:
- $on
- $off
- $emit
- $once
它们是基于new Vue()
后衍生出来的,与Vue
的使用方式一模一样。
PR
期待并欢迎您的PR。
但请您一定要遵守standard代码风格规范。
并且您只需要提交src
目录下的源码即可,无需
提交build
之后的代码
License
Copyright (c) 2017-present, tangdaohai