vue中使用中央事件总线bus

    vue中父组件向子组件传值使用props，非父子组件间传值时可以使用事件总线，或者使用vuex，来看下事件总线的例子。

    上代码，如下:

1、vue-bus.js

    List-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;//由于放在原型上
};
export default install;

    之后在main.js中引入vue-bus.js，如下List-2所示。

    List-2

import VueBus from './vue-bus'

Vue.use(VueBus);

    之后创建一个counter.vue，可以放在vue脚手架的components下，也可以放在其它目录，如下

2、counter.vue

    List-3 counter.vue

<template>
  <div>
    {{number}}
    <button @click="handleAddRandom">随机增加</button>
  </div>
</template>

<script>
  export default {
    name: "counter",
    props: {
      number: {
        type: Number
      }
    },
    methods: {
      handleAddRandom() {
        const num = Math.floor(Math.random() * 100 + 1);
        console.log("生产的num:" + num);
        this.$bus.emit('add', num);
      }
    }
  }
</script>

<style scoped>

</style>

    对上面List-3的说明，会接收来自父组件的参数number，并显示出来；有个按钮，点击会调用函数handleAddRandom，生成一个随机数，并调用事件总线的emit方法，将随机数给事件总线，由事件总线。

3、index.vue

    创建index.vue

    List-4 index.vue

<template>
  <div>
    随机增加:
    <counter :number="number"></counter>
  </div>
</template>

<script>
  import counter from './counter'

  export default {
    name: "index",
    components: {
      counter
    },
    data() {
      return {
        number: 0
      }
    },
    methods: {
      handleAddRandom(num) {
        this.number += num;
      }
    },
    created() {
      //this.$bus.on需要在created中使用，否则不会生效
      this.$bus.on('add', this.handleAddRandom);
    },
    beforeDestroy() {
      //需要在beforeDestroy中移除
      this.$bus.off('add', this.handleAddRandom);
    }
  }
</script>

<style scoped>

</style>

    List-4中，引入counter.vue，作为其子组件，定义数据number，并传给子组件；在created方法中通过$bus.on来监听"add"，之后会调用handleAddRandom方法。

    List-5 在router中使用之前创建vue组件

import Vue from 'vue'
import Router from 'vue-router'

import indexBus from 'components/vuebus/index'

Vue.use(Router);

export default new Router({
  routes: [             
    ....
    {                
      path: '/indexBus',   
      name: 'indexBus',     //路由名称，
      component: indexBus   //对应的组件模板
    },
  ]
})

    整体如下图1所示。

                                               

                                                                                          图4.1                                   

Reference:

1、梁灏，Vue.js实战，清华大学出版社