Vue-中央事件总线（bus）

---

什么是中央事件总线（bus）

通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果
也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。

我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。

如何实现：
主要使用了组件事件的三个方法：

    	//1.触发x组件的a事件: x.$emit("a事件",参数...)
		//2.给x组件绑定a事件  x.$on("a事件",监听器函数)
		//3.给x组件解绑a事件  x.$off("a事件",监听器函数)

//在父组件App中
<template>
  <div v-cloak class="App">
    <box2></box2>
    <box3></box3>
  </div>
</template>
<script>
  import box2 from "./components/box2.vue"
  import box3 from "./components/box3.vue"
  export default {  
    components: {
      box2,
      box3
    },
  }
</script>

//子组件box2中
<template>
<div>
    <button @click="fn">点我向box3传值</button>
</div>
</template>
<script>
export default {
     data() {
        return {
            msg:"box2传递的数据"
        }
     },
     methods: {
        fn(){
            //触发根组件的mybox3事件，并将msg变量传进去
            this.$root.$emit("mybox3",this.msg)  
        }
     },
}
</script>

//子组件box3中
<template>
    <div>
        <h1>box2中</h1>
        <h2>{{msg}}</h2>
    </div>
</template>
<script>
   export default {
      data() {
        return {
            msg:null
        }
      },
      mounted() {
        //给根组件绑定mybox3事件
         this.$root.$on("mybox3",(data)=>{
            this.msg= data
         })
      },
   }
</script>

可以看到bo3接受到了box2传递的数据
但是这种方法再根节点绑定的代码比较混乱，不利于维护，所以我们需要创建一个组件这个组件，所有组件都能访问。

创建中央事件总线

方法一 全局事件总线

1.在main.js文件中定义
Vue.prototype.$bus=new Vue({
	data:{
		arr:[]  //用来保存事件名
	},
	methods:{
	//绑定事件
		on(eventname,callback){
		//判断事件名是否重复
			if(this.arr.includes(eventname)){
				throw "eventname events already regist!!"
			}else{
				this.arr.push(eventname)
				this.$on(eventname,callback)
			}		
		},
		//触发事件，传递数据
		emit(eventname,...arg){
			this.$emit(eventname,...arg)
		},
		解绑
		off(eventname,callback){
			this.$off(eventname,callback)
		}
	}
})
2.使用方法
this.$bus.emit('定义名称',值) //触发事件 
this.$bus.on('定义名称' val=>{}) //绑定事件 
this.$bus.off('定义名称') //解绑

方法二、单独创建bus.js文件

1.在main.js的同级建一个bus.js,
2.在main.js引入
import bus from “./bus.js”
绑定到原型上 Vue.prototype.$bus = bus;