写在前面

上一篇讲了父子组件的通信，那么非父子组件间如何通信呢？在vue.js 2.x中，用一个空的Vue实例作为中央事件总线与两个跨级组件进行通信，在通信的过程中两个跨级组件互不联系。

文章的开始

前面大概介绍了中央事件总线的过程，具体如何进行看个栗子。

<body>
    <div id="app">
        {{ message }}
        <component-a></component-a>
    </div>
    <script>
        var bus = new Vue();
        Vue.component('component-a',{
            template: '<button @click="handleEvent">传递-事件</button>',
            methods: {
                handleEvent:function () {
                    bus.$emit('on-message','来自组件commponent-a的内容');
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function (){
                var _this = this;
                //在实例初始化时，监听来自bus实例的事件
                bus.$on('on-message',function (msg) {
                    _this.message = msg;
                }) ;
            }
        })
    </script>
</body>

结果如图所示：

点击传递事件按钮，显示‘来自组件commponent-a的内容’

1.通过组件创建了一个“传递事件”的按钮，点击按钮，触发点击事件，执行handleEvent函数，在handleEvent函数里面，通过bus.$emit将on-message传递到bus这个实例上面。

2.关于mounted这个钩子，我们知道el挂载到实例后调用，一般业务逻辑会从这里开始。

3.当el挂载app后，在mounted的函数里面监听来自bus的on-message事件，所以当on-message事件传到bus实例上后，就会执行匿名函数function，给app中data里的message赋值。（msg）{}。页面中再通过插值表达式将数据message显示出来。

文章的结束

在vue.js 2.x中，用一个空的Vue实例bus作为中央事件总线，bus实例也可以扩展，比如添加methods，data，computed等选项。当然还有通过父链和子组件索引也可以实现组件间的通信。

非父子组件通信-中央事件总线

写在前面

文章的开始

文章的结束