vue-happy-bus
v1.0.3
Published
Event Bus for Vue2. automatically cancel listening events when destroyed.
Downloads
173
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