vue通过全局事件总线实现兄弟组件通信

        在vue项目开发中，组件通信是很必要的，对于父子之间的通信，通过props、自定义事件等方法都可以实现，具体的有关父子组件通信可以查看vue父子组件通信。对于vue中兄弟组件的通信，我们一般通过全局事件总线的方法来实现，实现的原理是在vue实例上面绑定一个属性，然后在该属性上通过$on绑定事件，通过$emit触发方法，从而实现了兄弟组件之间的数据通信。

一、给vue实例绑定属性

在main.js中

new Vue({
  router,
  store,
  beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
  render: h => h(App)
}).$mount('#app')

二、给需要数据的组价的实例上绑定方法，监听事件

<template>
  <div class="hello">
    <h1>我是HelloWorld组件，我的数据是{{num}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
   demo(text){
     console.log(text);
     this.num=this.num+=1
   }
  },
  data(){
   return{
     num:1
   }
  },
  mounted() {
  this.$bus.$on('trigger',this.demo)
}
}
</script>

<style scoped lang="scss">

</style>

三、触发事件给对应组件传递数据

<template>
  <button @click="changeData">更改兄弟数据</button>
</template>

<script>
export default {
    name:"bus",
    methods:{
        changeData(){
        this.$bus.$emit('trigger','数据给兄弟')
    }
    }
}
</script>

<style>

</style>