JavaScript 4 订阅发布模式 bus 跨组件传值

订阅发布模式

// 存放 订阅消息
let _listeners = {};

let Bus = {
    // 添加 订阅
    watch(target, callback) {
        if (!_listeners[target]) {
            _listeners[target] = [];
        }
        _listeners[target].push(callback);
    },
    / / 发布信息
    trigger(target, ...args) {
        if (!_listeners[target]) return false;
            _listeners[target].forEach(listener => {
        listener.apply(this, args)
        })
    },
    // 移除订阅
    unwatch(target, callback) {
        if (!_listeners[target]) return false;
        if (!callback) {
            _listeners[target] = [];
        } else {
            _listeners[target].forEach((listener, index) => {
                if (listener == callback) _listeners[target].splice(index, 1);
            })
        }
    }
}
// 导出对象
module.exports = Bus;

使用

npm install snow-bus --save

vue项目中 main.js 引入 import Bus from 'snow-bus' Vue.prototype.$bus = Bus;

组件中使用
订阅
this.$bus.watch("ADD_TODE", this.addTodo);

发布
this.$bus.trigger('ADD_TODE',item);

github github.com/lanfeng-sno…

npm www.npmjs.com/package/sno…

bus总线

const install = (Vue) => {
    const Bus = new Vue({
    	methods: {
    		on (event, ...args) {
    			this.$on(event, ...args);
    		},
    		emit (event, callback) {
    			this.$emit(event, callback);
    		},
    		off (event, callback) {
    			this.$off(event, callback);
    		}
    	}
    })
    Vue.prototype.$bus = Bus;
}
export default install;



// main.js 引入
// import Vue from 'vue'
// import Bus from './bus'
// Vue.use(Bus)

// 使用

// created(){
//   this.$bus.on('CHANGE',this.add)
// },
// methods:{
//   add(){
//     console.log("addd")
//   }
// }
// beforeDestory() {
//   this.$bus.off("CHANGE", this.add);
// },
// methods: {
//   change(){
//      this.$bus.emit('CHANGE')
//   }
// }