Vue插件——组件间通信bus

vue中父子间通信常用的有 ( $on 和 $emit 搭配props);
兄弟间通信可以通过使用一个空的Vue实例作为中央事件总线，就是常说的bus；或者用vuex（小项目没必要使用）；
bus在npm上网址
以下是自己看书，照例写的bus小插件：

bus精华点就是，利用一个空的vue实例作为中央事件总线，这样无论是组件树的哪一层都能通信到，
使用$emit， $on， $off 分别来分发、监听、取消监听事件：

//vue-bus.js
const VueBus= 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 VueBus;

然后在main.js里面作为插件引入

import Vue from 'vue'
import App from './App'
import router from './router'
import VueBus from './assets/js/vue-bus'

Vue.use(VueBus);

在需要分发事件的组件中使用：

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

<script>
  export default {
    props: {
      numbers: {
        type: Number
      }
    },
    data() {
      return {}
    },
    methods: {
      handleAddRandom() {
        //随机获取1~100中的数
        const num = Math.floor(Math.random() * 100 + 1);
        this.$bus.emit('add', num);
      }
    },
    components: {}
  }

</script>

在需要监听的组件使用：

<counter :numbers="number"></counter>
method:{
	handleAddRandom(num){
        this.number += num;
      }
},
 created(){
 //创建后监听
      this.$bus.on('add',this.handleAddRandom);
    },
    beforeDestroy(){
    // 最好在组件销毁前取消监听
      this.$bus.off('add',this.handleAddRandom);
    }