Vue2：中央事件总线bus

event bus

通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果

 

1、在vue-bus.js文件中

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;//由于这个新的vm放在与界面绑定的那个vm的原型上,因此页面上的所有组件都能通过this.$bus访问这个新vm对象
};
export default install;

 

2、main.js文件中

import VueBus from './vue-bus'
Vue.use(VueBus);

 

3、组件文件中：任意业务中都可以通过调用来绑定事件,触发事件并传值,和销毁事件

https://www.cnblogs.com/LIXI-/p/16672166.html

this.$bus.on(event,callback) 
this.$bus.off(event,callback) 
this.$bus.emit(event, ...args)

 

例：

组件1:
 this.$bus.on('changedFormObject',(val) =>{
            //接受并处理传过来的值:val
            this.msg = val;
        });
组件2:
this.$bus.emit('changedFormObject',this.inputValue);
//把组件2的data中的给inputValue值传给组件1