Vue 中央事件总线初体验

1.创建一个新的vue或者js文件，命名随意，我的命名为vueBus.js，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// 由于放在原型上
}
export default install

2.全局引用

import VueBus from './utils/vueBus'  //自己的文件路径

Vue.use(VueBus);

3.利用this.$bus.on监听此组件中需要在其他组件调用的方法

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    methods: {
      cLog(msg) {
        console.log(msg)
      }
    },
    created() {
      //this.$bus.on需要在created中使用，否则不会生效
      this.$bus.on('clog', this.cLog);
    },
    beforeDestroy() {
      //需要在beforeDestroy中移除
      this.$bus.off('clog', this.cLog);
    }
  }
</script>

this.$bus.on('clog', this.cLog)中第一个参数是监听的标志，第二个参数为需要在其他组件中调用的方法

4.在其他组件中调用监听的函数

cLog () {
      let msg='你好！'
      this.$bus.emit('cLog', msg)
    },

this.$bus.emit('cLog', msg)第一个参数是监听标志，第二个参数为被监听方法所需参数值

按照以上方法就能完美的使用vue的事件总线了。

 

参考资料：https://my.oschina.net/u/2518341/blog/2960762