npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-happy-bus

v1.0.3

Published

Event Bus for Vue2. automatically cancel listening events when destroyed.

Downloads

110

Readme

vue-happy-bus

欢迎PR

此版本只适用 vue2.x 版本。如果在 vue3 中运行请查看vue-happy-bus@next

vue-happy-bus 是干嘛的

vue-happy-bus是一款基于vue实现的订阅/发布插件。

我们通常在使用非父子组件间通信时,采用new Bus()的方式来做一个事件广播。 但一个弊端就是,这种方式并不会自动销毁,所以为了避免回调函数重复执行,还要在destroyed周期中去做Bus.$off('event name', fn)的操作。

这样带来的冗余代码就是:

  1. $on 的回调函数必须是具名函数。不能简单的Bus.$on('event name', () => {})使用匿名函数作为回调了,所以需要将回调函数放到metheds中进行额外的声明
  2. destroyed生命周期中去销毁事件的监听。

我只是想在某个路由中监听下 header 中一个按钮的点击事件而已,竟然要这么麻烦???

所以此轮子被造出来了 🤘。

它主要解决在非父子组件间通信时,解决重复绑定事件、无法自动销毁的而导致回调函数被执行多次的问题。

总得来说他是能让你偷懒少写代码的工具。

安装

  1. npm 推荐使用npm,这样可以跟随你的webpack配置去选择怎样打包。
npm i -D vue-happy-bus
  1. 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

Copyright (c) 2017-present, tangdaohai