我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父）
今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用 个空的 Vue 实例作为中央 件总线（ bus ），也就是 相当于一个中介。
比如你需要租房子 你可能会找房产中介来登记你的需求 然后中介把你的信息发给满足要求的出租者，出租者再 价和看房时间告知中介，由中介再转达给你，整个过程中 买家和卖家并没有任何交流，都是通过中间人来传话的，或者你最近可能要换房了，你会找房产中介登记你的信息订阅与你找房需求相关的资讯， 旦有符合你 房子出现时，中介会通知 ，并传达你房子 具体信息
下面的例子中你和出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线 bus
主要传递方式大概就是下面这几步：
通过 Bus.$emit('on-message',this.abc) 的方式进行发布消息，他有两个参数，一个是消息声明，第二个是传递的值，key和value的关系
另一个组件接收通过 Bus.$on('on-message', msg => { }）的方式，第一个参数是传递过来的消息声明，第二个参数可以是个函数，msg就是做为传递过来的参数
这里有个坑，在发布者进行发布消息的时候，要在destroyed（）{}生命周期中，进行销毁，并且在接收的时候$on要在created生命周期中进行获取，mounted是获取不到的，这样写，在旧组件销毁的时候新的组件拿到旧组件传来的值，然后在挂载的时候更新页面里的数据。否则传过来的值是不更新的
我们可以在bus.js中使用data，methods等选项，都是公共信息，bus.js中的data数据可以说类似于vuex中state中的数据。如果实际项目中需要存值。
当然复杂项目建议还是使用vuex。
下面是demo代码示例：
首先你要创建bus.js
import Vue from 'vue'
const Bus = new Vue({
data() {
return {
a:'1',
b:'2',
c:'3',
}
}
})
export default Bus;
page2.vue
<!-- -->
<template>
<div>
<button @click="add">add</button>
</div>
</template>
<script>
import Bus from './bus'
export default {
data () {
return {
abc:'abc'
};
},
methods: {
add(){
Bus.$emit('on-message',this.abc)
this.$router.push({name:'page1'})
}
},
destroyed(){
Bus.$emit('on-message',this.abc)
}
}
</script>
page1.vue
<!-- -->
<template>
<div>
{{ message}}
</div>
</template>
<script>
import Bus from './bus'
export default {
data() {
return {
message: '1'
}
},
created() {
console.log(Bus.a)
console.log(Bus.b)
console.log(Bus.c)
Bus.$on('on-message', msg => {
console.log('msg：' + msg) //msg:abc
this.message = msg
console.log('this.message：' + this.message) //this.message：abc
})
},
methods: {}
}
</script>
<style scoped>
</style>
