# @lifuzhao100/vue-eventbus

> 特性：支持事件回调自动绑定组件this、支持组件销毁时自动取消事件绑定 ## 使用

Latest version **1.0.5** (published 2021-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lifuzhao100/vue-eventbus
pnpm add @lifuzhao100/vue-eventbus
yarn add @lifuzhao100/vue-eventbus
bun add @lifuzhao100/vue-eventbus
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-01-14 |
| First published | 2021-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | lifuzhao100 |
| Maintainers | lifuzhao100 |
| Keywords | vue, vue2, event-bus |

## Links

- npm: https://www.npmjs.com/package/@lifuzhao100/vue-eventbus
- Repository: https://github.com/lifuzhao100/vue-eventbus
- Homepage: https://github.com/lifuzhao100/vue-eventbus#readme
- Issues: https://github.com/lifuzhao100/vue-eventbus/issues
- npm.io page: https://npm.io/package/@lifuzhao100/vue-eventbus

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2021-01-14
- 1.0.4 — 2021-01-14
- 1.0.3 — 2021-01-11

## README

# vue-eventbus
特性：支持事件回调自动绑定组件this、支持组件销毁时自动取消事件绑定
## 使用

1. 安装

```shell
# use npm
npm install @lifuzhao100/vue-eventbus

# use yarn 
yarn add @lifuzhao100/vue-eventbus
```

2. 注册

```javascript
import Vue from 'vue'
import eventBus from '@lifuzhao100/vue-eventbus'

Vue.use(eventBus)
// or 指定全局属性名，默认$bus
Vue.use(eventBus, '$eventBus')
```

3. 使用

- 组件a

```html
<template>
    <button @click="handleClick">click me</button>
</template>
<script>
    export default {
        methods: {
            handleClick() {
                this.$bus.emit('event-name', 'are u ok ?')
            }
        }
    }
</script>
```

- 组件b

```html
<template>
    <p>{{message}}</p>
</template>
<script>
    export default {
        data() {
            return {
                message: 'default message'
            }
        },
        mounted() {
            this.$bus.on('event-name', function (message) {
                this.message = message
            })
        }
    }
</script>
```
> 在Vue组件内部使用时，无需关注事件回调的销毁，在组件销毁时会自动清除

## api
- $on   别名on
```typescript
function $on(event: string | Array<string>, fn: Function) : EventBus;
```
注册事件监听，event为Array时注册多个相同回调的事件监听
- $off  别名off
```typescript
function $off(event: string | Array<string>, fn: Function | undefined) : EventBus;
```
为 !fn === true时清空当前事件监听

- $once 别名once
```typescript
function $once(event: string | Array<string>, fn: Function | undefined) : EventBus;
```
执行第一次事件回调前会将当前回调移除(fn为Function时)或者清空(!fn === false时)

- $emit 别名emit
```typescript
function $emit(event: string, ...rest) : EventBus;
```
触发事件监听，将注册的同名事件的所有回调执行，参数为rest。(背后执行的是fn.apply(eventBus, rest))

---
_Source: https://npm.io/package/@lifuzhao100/vue-eventbus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._