Vue-Next-Event-Plugin

Vue 2.x $on/$off/$emit

Getting Started

$ npm install --save vue-next-event-plugin

Usage

import { createApp } from 'vue'
import VueNextEventPlugin from 'vue-next-event-plugin'
 
const app = createApp({
    name: 'App',
    template: `...`,
    setup() {
        return {}
    },
})
 
app.use(VueNextEventPlugin)
app.mount('#app')

Examples

In Component A:

import { defineComponent, inject } from 'vue'
 
export default defineComponent({
    name: 'CompA',
    setup(props, context) {
        const $event = inject('$event')
 
        $event.on('hello', (params) => {
            console.log(params)
        })
 
        return {}
    },
})

In Component B:

import { defineComponent, inject } from 'vue'
 
export default defineComponent({
    name: 'CompB',
    setup(props, context) {
        const $event = inject('$event')
 
        $event.emit('hello', 'Hello, from Component B')
 
        return {}
    },
})

API

on( event, handler )

• Arguments

  • { string | Array<string> } event
  • { Function } handler

• Usage

  Listen for a custom event on the root instance.

• Example

  const $event = inject('$event')
   
  $event.on('hello', (params) => {
      console.log(params)
  })

off( event, handler )

• Arguments

  • { string | Array<string> } event
  • { Function } handler

• Usage

  Remove custom event listener.

• Example

  const $event = inject('$event')
   
  $event.off() // remove all
  $event.off('eventA') // remove all hanlders for eventA
  $event.off('eventA', handler) // remove current handler for eventA
  $event.off(['eventA', 'eventB']) // remove all hanlders for eventA & eventB

emit( eventName, […args] )

• Arguments

  • { string } eventName
  • { any } […args]

• Usage

  Trigger an event.

• Example

  const $event = inject('$event')
   
  $event.emit('eventA', 'This is eventA')

License

MIT