ebus-light/README.md

轻量级的 Event Bus

# 事件总线

<p align="center">
  <img src="https://img.shields.io/npm/dw/ebus-light">
  <img src="https://img.shields.io/npm/unpacked-size/ebus-light">
  <img src="https://img.shields.io/npm/v/ebus-light">
  <img src="https://img.shields.io/npm/l/ebus-light">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

轻量级的 Event Bus。

## 1. 如何使用

安装：

```bash
pnpm add ebus-light
```

使用方式有以下几种。

1. 直接引入

`bus` 是全局唯一的实例。

```ts
import { bus } from 'ebus-light';

bus.emit('foo', { name: 'yang' });


function onFoo(e) {
  console.log(e.name);
}

bus.on('foo', onFoo)
bus.off('foo', onFoo)
```

2. Vue 插件

也可当作 `Vue` 插件，先在 `main.ts` 中注册：

```ts
import { eventBus } from 'ebus-light';

app.use(eventBus);
```

在页面中使用：

```ts
// options API
export default {
  mounted() {
    this.$eventBus.emit('foo')
  }
}
```

通过 `inject` 访问：

```ts
import `inject` from 'vue';

export default {
  setup() {
    const bus = inject('$eventBus');
    bus.emit('foo');
  }
}
```

## 2. 类型

通过插件方式使用时传递的参数：

```ts
export interface Options {
  // 是否挂载在全局
  global?: boolean;
  // 是否 provide
  inject?: boolean;
  // 实例上挂载的名称
  globalPropertyName?: string;
  // 通过 inject 引入的名称
  injectName?: string;
}
```

参数默认值：

```ts
const DEFAULT_OPTIONS = {
  global: false,
  inject: false,
  globalPropertyName: '$eventBus',
  injectName: '$eventBus',
};
```

## 3. 更新日志

[点此查看](./CHANGELOG.md)