Vue非父子组件通信之发布订阅模式

Vue组件之间如果不是父子组件，数据传递问题：
这样一个需求：
两个兄弟组件均自定义了一个count值，需要在点击的时候将点击组件的count值，赋值给其兄弟组件的count
DOM结构：

<div id="app">
  <children count="a"></children>
  <children count="b"></children>
</div>

首先注册Vue

let app =new Vue({
  el:'#app',
})

创建事件总线

Vue.prototype.bus=new Vue();

创建组件

Vue.component('children',{
  template:`<div @click="changeClick">{{selfCount}}</div>`,
  props:['count'],
  data(){
    return {selfCount:this.count}
  },
  methods:{
    changeClick(){
      this.bus.$emit('change',this.count)
    },
  },
  mounted:
    function(){
      let _self=this;
      this.bus.$on('change',function (msg) {
        _self.selfCount=msg
      })
    }
})

注意点：

• 在vue父子组件之间传值，默认是单项的，子组件不可以直接修改父组件传递过来的参数，如果需要修改，需要先接收一下再进行修改
• mounted里面注意保存this，也可直接使用箭头函数

this.bus.$on('change', (msg)=>{
        this.selfCount = msg
    })