Vue-happy-bus NPM

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

MIT

Vue Bus event

vue

@everything-registry/sub-chunk-3082 vue-global-modal gcomps @infinitebrahmanuniverse/nolb-vue-h @segiwh/buss-ui

4 years ago

5 years ago

5 years ago

5 years ago

7 years ago

8 years ago

8 years ago