vue中使用中央事件总线bus

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

    上代码，以下:

一、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下，也能够放在其它目录，以下

二、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方法，将随机数给事件总线，由事件总线。

三、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:

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