https://github.com/panio123/vue-easy-event

Simple event bus for vue.js
https://github.com/panio123/vue-easy-event

vue vue-event-bus vuejs

Last synced: 17 days ago
JSON representation

Simple event bus for vue.js

• Host: GitHub
• URL: https://github.com/panio123/vue-easy-event
• Owner: panio123
• Created: 2017-07-17T03:34:21.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-20T02:26:42.000Z (over 7 years ago)
• Last Synced: 2024-10-10T07:40:44.993Z (about 1 month ago)
• Topics: vue, vue-event-bus, vuejs
• Language: JavaScript
• Size: 124 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple event bus for vue.js/简单的vue event bus

## Installation/安装

``` bash

npm i vue-easy-event

```

## API

### `Eon`

#### 监听事件，传入事件名称(event)和句柄(handle)

``` js

    // @event - string

    // @handle - function

    this.Eon(event,handle);

```

### `Eonce`

#### 监听一次

``` js

    // @event - string

    // @handle - function

    this.Eonce(event,handle);

```

### `Eoff`

#### 取消监听，传入事件名称和句柄

``` js

    // @event - string

    // @handle - function

    this.Eoff(event,handle);

```

### `Etrigger`

#### 触发事件，传入事件名称，需要传递参数时使用data

``` js

    // @event - string

    // @data - object

    this.Etrigger(event,data);

```

### 匿名函数可以监听，但是无法取消监听。

### Usage

``` js

//webpack

import Vue from 'vue';

import EventBus from 'vue-easy-event';

Vue.use(EventBus);

```

#### or

``` html

```

``` js

Vue.component('child', {

    template: '#child',

    data: function () {

        return {

            msg: 1

        };

    },

    methods: {

        add: function () {

            this.Etrigger('add', this.msg);

        }

    }

});

var vm = new Vue({

    el: '#app',

    data: {

        msg: 1

    },

    methods: {

        add: function (count) {

            this.msg += count || 1;

        },

        startListen() {

            this.Eon('add', this.add);

        },

        cancelListen() {

            this.Eoff('add', this.add);

        },

        listenOnce() {

            this.Eonce('add', this.add);

        },

    }

});

var vm2 = new Vue({

    el: '#app2',

    data: {

        msg: 2

    },

    methods: {

        add: function (count) {

            this.Etrigger('add', this.msg);

        }

    }

});

```

### evet bus 虽然方便，但是仅仅适合非常小型简单的项目，否则还请使用vuex