Vue.js中组件间的数据传输与通信

一：兄弟组件间的数据通信

组件使用过程中我们发现，Loading、Tips组件的显隐设置，Topbar组件的高亮切换等操作，不是由这些组件自己控制的，是要在同级或者说兄弟组件中控制的。

Loading这些组件需要别的组件向它们传输数据，然后Loading内部根据这些数据实现功能。这样Loading等就需要全局性的暴露或者说监听一个方法，其兄弟组件就可以向该全局方法传递参数，实现通讯。

第一步：声明一个各组件都能操作到的公共实例

在main.js中声明一个bus实例：Vue.prototype.bus = new Vue

第二步：被操作组件用$on监听一个方法

data(){
    return{
        Loading:false
    }
},
created(){
    var That = this;
    this.bus.$on('Loading',function (data) {
        That.Loading = !!data;
    })
}

第三步：兄弟组件通过$emit传递数据

this.bus.$emit('Loading',true);