非父子组件通信 实例

    <div id="app">
        <foo></foo>
        <br>
        <bar></bar>
    </div>

    var eventsBus = new Vue({});
        //foo组件
        var foo = {
            template:
            ‘<div>                <p>                    the count of foo is {{ fooCount }} +                     <button @click="addBar"> add bar\‘s count </button>                </p>            </div>            ‘,
            data:function(){
                return {
                    fooCount:0
                }
            },
            methods:{
                addBar:function(){
                    //触发中转站事件
                    eventsBus.$emit(‘addBar‘)
                }
            },
            mounted:function(){ //当渲染结束后让中转实例监听addfoo方法，当addfoo方法执行后让此组件的fooCount+num（其实就是把addfoo这个函数注册给了eventsBus实例）
                eventsBus.$on(‘addFoo‘,function(num){
                    this.fooCount += num
                }.bind(this))
            }
        }
        //bar组件
        var bar = {
            template:
            ‘<div>                <p>                    the count of bar is {{ barCount }} +                     <button @click="addFoo"> add Foo\‘s count </button>                </p>            </div>            ‘,
            data:function(){
                return {
                    barCount:0
                }
            },
            methods:{
                addFoo:function(){
                    //触发中转站事件
                    eventsBus.$emit(‘addFoo‘,2)
                }
            },
            mounted:function(){
                eventsBus.$on(‘addBar‘,function(){
                    this.barCount ++
                }.bind(this))
            }
        }

        var vm = new Vue({
            el:"#app",
            components:{
                foo,
                bar
            }
        })
        //总结来下就是addBar和addFoo都被注册进了中转实例中，当点击Foo组件的时候，触发addBar方法，当点击Bar组件的时候，触发addFoo方法，并且直接加2