https://github.com/fffixed/vue-bus

Tiny simple central event bus plugin for Vue.js
https://github.com/fffixed/vue-bus

events vue-plugin vuejs

Last synced: 8 months ago
JSON representation

Tiny simple central event bus plugin for Vue.js

• Host: GitHub
• URL: https://github.com/fffixed/vue-bus
• Owner: fffixed
• License: mit
• Created: 2017-07-29T07:31:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-29T08:44:21.000Z (almost 8 years ago)
• Last Synced: 2024-11-04T17:45:49.758Z (about 1 year ago)
• Topics: events, vue-plugin, vuejs
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 50
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-bus - Tiny simple central event bus plugin for Vue.js ` 📝 3 years ago` (Utilities [🔝](#readme))
• awesome-vue-zh - Vue总线 - Vue.js 2的简单中央事件总线插件. (公用事业 / 自定义事件)
• awesome-vue - vue-bus ★42 - Tiny simple central event bus plugin for Vue.js 2. (Utilities / Custom Events)
• awesome-vue - vue-bus - Tiny simple central event bus plugin for Vue.js 2. (Utilities / Custom Events)
• awesome-vue - vue-bus - Tiny simple central event bus plugin for Vue.js 2. (Components & Libraries / Utilities)

README

          
# vue-bus

[![awesome-vue](https://img.shields.io/badge/Vue.js-AWESOME-ff69b4.svg)](//github.com/vuejs/awesome-vue)

[![license](https://img.shields.io/github/license/fffixed/vue-bus.svg)](//opensource.org/licenses/MIT)

A tiny simple central event bus plugin for [Vue.js](//vuejs.org) (requires Vue >= 2.0).

The plugin realise [Non Parent-Child Communication](//vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication).

_(655 byte gzip)_

## Installation

Download and use with your build system

```javascript

import VueBus from 'vue-bus'

// ... maybe ...

var VueBus = require('vue-bus')

// ...  and  ...

Vue.use(VueBus)

```

Or just include it with a script tag

```html

```

:sparkles:

## Usage

direct way:

```javascript

// in component A's method

this.$bus.$emit('my-event', 1)

// in component B's created hook

this.$bus.$on('my-event', function(arg) {

  // ...

})

//And don't forget to use "this.$bus.$off" to remove unnecessary listeners.

```

magic way:

```javascript

// in component A's method

this.$bus=['my-event', 1]

// in component B create $bus option

methods: { /* ... */ },

$bus: {

  'my-event': function(arg) {

    // ...

  }

}

```

## License

[MIT](//opensource.org/licenses/MIT)

Copyright (c) 2017 fffixed