Vue bus插件封装

阅读目录

• Vue bus插件封装
• 插件使用

回到顶部

Vue bus插件封装

• 通知全部实例，可以在多处使用

// 定义bus插件，用户数据传递
const install = function(Vue) {
    const Bus = new Vue({
        methods: {
            emit(event, ...args) {
                this.$emit(event, ...args)
            },
            on(event, callback) {
                this.$on(event, callback)
            },
            off(event, callback) {
                this.$off(event, callback)
            }
        }
    })
    Vue.prototype.$bus = Bus;
}

export default install;

回到顶部

插件使用

    // 注意：要在created钩子中注册总线事件
    created() {
        this.$bus.on('add', (msg) => {
            console.log('add:', msg)
            this.number += msg
        })
    },
    // 注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
    beforeDestory() {
        this.$bus.off('add')
    },
    click(){
			this.$bus.emit('add',10)
		},