vue3-eventbus

    2.0.0 • Public • Published

    vue3-eventbus
    npm

    Vue3-Eventbus

    Tiny event bus plugin for Vue3.

    Why 使用原因

    Vue3实例不再提供$onemit函数,官方推荐引入外部工具实现,使用本插件可以让你更轻松的在Vue3中使用轻量且功能完善eventBus 不引入插件的用法

    App instance dont't have $on and $emit methods anymore in Vue3.

    Remove $on, $off and $once instance methods. Vue instances no longer implement the event emitter interface. -- active-rfcs/0020-events-api-change.md

    So the RFC suggests using a third-party library instead. But you have to do some repetitive work for it. This tiny tool can solve this problem for you.

    Install 安装

    $ npm install --save vue3-eventbus

    Usage 用法

    use

    // import {createApp} from 'vue
    import eventBus from 'vue3-eventbus'
    // const app = createApp(App)
    app.use(eventBus)
     

    emit

    // Button.vue
    import bus from 'vue3-eventbus'
    // or: import { bus } from 'vue3-eventbus'
    export default {
        setup() {
            // fire an event
            bus.emit('foo', { a: 'b' })
        }
    }

    listen/unlisten

    // Panel.vue
    import bus from 'vue3-eventbus'
    export default {
        setup() {
           // listen to an event
            bus.on('foo', e => console.log('foo', e) )
     
            // listen to all events
            bus.on('*', (type, e) => console.log(type, e) )
     
            // working with handler references:
            function onFoo() {}
            bus.on('foo', onFoo)   // listen
            bus.off('foo', onFoo)  // unlisten
        }
    }

    Advanced Usage 更多用法

    Access by instance 通过实例访问

    Don't need to import vue3-eventbus 不需要import vue3-eventbus

    export default {
        created() {
            this.$eventBus.emit('foo')
        }
    }

    Access by inject method 通过inject访问

    Have to import inject api from vue

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

    Options 配置

    app.use(bus, options)

    defaultOptions = {
        // Access by instance 是否挂载在全局
        global: true,
        // Access by inject 是否provide
        inject: true,
        // 实例上挂载的名称
        globalPropertyName: '$eventBus',
        // 通过inject引入的名称
        injectName: '$eventBus'
    }

    example 修改挂载在应用上的名称

    // main.js
    app.use(bus, {
        globalPropertyName: '$ev'
    })
     
    // Button.vue
    created() {
        this.$ev.emit('click', {time: Date.now()})
    }

    | | | | | | |

    Native usage without vue3-eventbus

    不使用vue3-eventbus插件的原生用法

    // bus.js
    // + + +
    export default {
        on(){
            // ...
        }
        off(){
            // ...
        }
        emit(){
            // ...
        }
    }
     
    // main.js
    // +
    import $bus from './lib/helpers/bus.js'
    // +
    app.provide('$bus', $bus)
    // +
    app.config.globalProperties.$bus = $bus
     
    // Button.vue
    // +
    import { inject } from 'vue'
    setup() {
        // import and inject in every component
        // +
        const $bus = inject('$bus')
        $bus.emit('click')
    }
     
    // Panel.vue
    // +
    import { inject } from 'vue'
    setup() {
        // +
        const $bus = inject('$bus')
        $bus.on('click')
    }
     
    // Page.vue
    import { inject } from 'vue'
    setup() {
        const $bus = inject('$bus')
        $bus.off('click')
    }

    Install

    npm i vue3-eventbus

    DownloadsWeekly Downloads

    28

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    4.6 kB

    Total Files

    3

    Last publish

    Collaborators

    • szyuan