vue非父子通讯——bus总线

1. 介绍

在vuex加入后，让组件之间的通信更加的清晰，中大型项目建议这种方式。但是在小微型项目中，用$bus总线的方式会更加快捷一些。

2. 关于事件

Vue事件分两部分，一是DOM绑定事件，二是自定义事件。

DOM绑定事件用 v-on 或语法糖 @ 方式来绑定

Vue自定义事件是为组件间通信设计，自定义事件提供 $on、$once、$off、$emit

$on
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$on('test', function (msg) {
  console.log(msg)
})

$emit:
触发当前实例上的事件。附加参数都会传给监听器回调。

Vue.component('test', {
  template: `
    <button v-on:click="$emit('test', 'test msg')">
      Click me to be test
    </button>
  `
})

$off:
移除自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器。

3. 应用

应用一：将Bus抽离出来

Bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

组件一

import Bus from './Bus'

export default {
  data() {
  	return {
    	.........
  	}
  },
  methods: {
  	....
    Bus.$emit('log', 120)
  },
}

组件二

import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
    mounted () {
       Bus.$on('log', content => { 
          console.log(content)
        });    
    }    
} 

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

应用二：将Bus注入到Vue根对象中

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　

})

在子组件中通过 this.$root.Bus.$on() , this.$root.Bus.$emit() 来调用

应用三：将bus挂载到vue.prototype上（推荐）

Vue.prototype.bus = new Vue();
//子组件使用时，
this.$bus.$on()
this.$bus.$emit()

通过对Vue原型的拓展方式来实现，为什么不用 this.$root.$emit 直接来操作呢？因为希望的是root的vue只管数据管理这块，如果涉及事件派发，用专门的$bus来做更合理。

参考文章：https://blog.csdn.net/Randy_Shenyp/article/details/64233570
https://www.cnblogs.com/fanlinqiang/p/7756566.html