Vuejs中兄弟组件之间通信的方式

   最近在做一个个人的博客网站，用到的技术栈是Vuejs2.0,后端是SpringBoot+MyBatis，碰到过大大小小的问题，这篇文章主要来谈谈Vuejs中兄弟组件之间通信的方式。

  Vue自身为组件通信提供的统一解决方式是Vuex，借鉴了React中的Redux，大体的思路就是采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化，实际上就是把组件间的通信都转变为和store之间的通信，更加方便管理，但是我们个人的项目中还用不到这么强大的Vuex，反而是冗余的，因此，我采用了另一种方式叫做EventBus。

   EvenetBus的实现原理其实也是和Vuex差不多，重新实例化一个Vue对象作为中央事件总线，也就是兄弟组件之间通信的中介。

  我们创建一个Bus.js文件，目的就是为了实例化一个新的Vue对象，

import Vue from 'vue';

export default new Vue();

 我的目的是整个页面是文章详情，有两个子组件，左边是分类列表，右边是根据文章分类查找出所有文章列表，显然要通过左边的组件向右边传递分类的参数，根据EventBus提供的Bus.emit()方法传参，列表点击绑定change方法，传递的是value值，我们需要通过一些处理得到分类的名称，我们左边组件的代码如下：

change(index){

let value=this.$refs.category_a[index].innerHTML.trim('');

value=value.substr(0,value.indexOf('('));

Bus.$emit('getPhotos',value);

},

右边文章列表接受方式自然就是Bus.on()方法，代码如下：

Bus.$on('getCategory',target=>{

this.$http.get(`http://localhost:8080/news/select/category/${target}`).then((res)=>{

      this.category=target;

      this.items=res.body;

}).catch(err=>{

console.log(err);

})

});

}

  这样就实现了两者之间的通信。