vue 事件总线 eventBus

父组件向子组件传递参数用v-bind
子组件向父组件传递参数用this.$emit
兄弟组件传参eventBus或者是用vuex进行传递

下边说说eventBus

首先在src的assets的目录下新建一个vue-bus.js文件

import Vue from 'vue'
export default new Vue()

兄弟组件
a组件

import Bus from '@/assets/js/vue-bus.js'
methods: {
	handlerClick(event) {
	  Bus.$emit('handw', "挖偶")
	}
}

b组件

import Bus from '@/assets/js/vue-bus.js'
created(){
    Bus.$on('handle2', function (num) {
      console.log(num)
    })
}

可以有多个兄弟组件通信 通过接收的名字

eventBus使用不善，会造成灾难。vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

EventBus.$off('aMsg', {})

全局的eventBus

它们的工作原理是发布/订阅方法，通常称为Pub/Sub

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

在这个特定的总线中使用两个方法 $on和$emit。一个用于创建发出的事件，它就是$emit；另一个用于订阅$on：

var EventBus = new Vue();

this.$bus.$emit('nameOfEvent', { ... pass some event data ...});

this.$bus.$on('nameOfEvent',($event) => {
  // ...
})

然后我们可以在某个Vue页面使用this.$bus.$emit(“sendMsg”, ‘我是web秀’);，另一个Vue页面使用

this.$bus.$on('updateMessage', function(value) {
  console.log(value); // 我是web秀
})

同时也可以使用this.$bus.$off(‘sendMsg’)来移除事件监听。