Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-events

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-events

Easy event handling for Vue applications.

  • 3.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7K
increased by8.06%
Maintainers
1
Weekly downloads
 
Created
Source

vue-events

A Vue.js plugin that simplify events.

Works with both Vue 1.0 & Vue 2.0.

Installation

1.) Install package via Yarn or NPM
$ yarn add vue-events

$ npm install vue-events
2.) Install plugin within project.
import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)

window.Vue = require('vue')
require('vue-events')

Methods

MethodParamsDescriptionDocs
vm.$events.$emitevent, payloadEmit the event with the given payload.vm.$emit
vm.$events.emitevent, payloadEmit the event with the given payload. Alias for vm.$events.$emitvm.$emit
vm.$events.fireevent, payloadEmit the event with the given payload. Alias for vm.$events.$emitvm.$emit
vm.$events.$onevent, callbackListen for the event with the given callback.vm.$on
vm.$events.onevent, callbackListen for the event with the given callback. Alias for vm.$events.$onvm.$on
vm.$events.listenevent, callbackListen for the event with the given callback. Alias for vm.$events.$onvm.$on
vm.$events.$offevent, callbackRemove event listener(s) for the eventvm.$off
vm.$events.offevent, callbackRemove event listener(s) for the event. Alias for vm.$events.$offvm.$off
vm.$events.removeevent, callbackRemove event listener(s) for the event Alias for vm.$events.$offvm.$off

Usage

The $events prototype object.

This plugin extends Vue.prototype to include a new $events object, which is a just a plain vm that will serve as your global event bus. The $events vm has a couple aliases for the standard event methods.

Firing an event

There are 3 methods that fire events.

Note: $events.fire & $events.emit are aliases for $events.$emit

new Vue({

  data() {
    return {
      eventData: {
        foo: 'baz'
      }
    }
  },

  mounted() {
    this.$events.fire('testEvent', this.eventData);
    this.$events.emit('testEvent', this.eventData);
    this.$events.$emit('testEvent', this.eventData);
  }

})
Listening for an event

There are 3 methods that register event listeners.

Note: $events.listen & $events.on are aliases for $events.$on.

new Vue({
  mounted() {
    this.$events.listen('testEvent', eventData => console.log(eventData));
    this.$events.on('testEvent', eventData => console.log(eventData));
    this.$events.$on('testEvent', eventData => console.log(eventData));
  }
})
Removing an event listener

There are 3 methods that remove event listeners.

Note: $events.off & $events.remove are aliases for $events.$off.

new Vue({
  mounted() {
    this.$events.on('testEvent', eventData => console.log(eventData));
  },

  beforeDestroy() {
    this.$events.$off('testEvent')
    this.$events.off('testEvent')
    this.$events.remove('testEvent')
  }
})

Demo

If you'd like to demo vue-events try vue-mix

License

MIT

Keywords

FAQs

Package last updated on 27 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc