前言.父子组件之间的通信vue提供了更直接的方式，此处不细说，不会的可以去官网研读文档。但是官方没有提供直接的方法用于兄弟组件之间的传值以及相关的逻辑处理。因此就有了vue-bus和vuex.vue-bus可用于不是特别复杂的项目中任意组件的传值问题。vuex不仅能实现组件之间通信的问题还提供了相应的逻辑处理方法。但是也更为庞大，所以一般简单的传值问题可用于vue-bus解决
1.vue-bu官网地址
https://www.npmjs.com/package/vue-bus
第一步：安装

第二部：
单页面之中main.js文件中注册

第三步：使用
在想传递出去的页组件中某个方法里面触发事件
下面图片中触发了一个叫做add-todo的事件，并传递了一直值{ text: this.newTodoText }，还触发了一个叫做once的事件

然后在想接受=收传递过来数据的页面监听触发的事件
下面图片中this.$bus.on监听add-todo事件并接受传递过来的值，并传入了一个回调函数addTodo,这个函数的参数就是传递过来的数据（newTodo）,this.$bus.once是只监听一次之后就不在监听。

注意：监听事件要尽早监听越好，所以一般放在created这个周期函数里面。
其次就是离开这个页面之后就没有必要再监听，所以要销毁这个监听事件，this.$bus.off销毁监听事件。
on once off emit 是 $on $once $off $emit的别名。

2.vuex
学习vuex,弄明白官网的一张图

虚线的部分就是vuex的工作区，可以看成是一个库，用于保存组件之间共享的数据，同步与异步操作，state保存组件之间共享的数据，组件需要改变公用的数据，必须走上面的一个流程，首先组件要触发actions,actions中保存着一些对数据的异步操作，一些批量的同步操作也可以放在actions中，然后actions中的方法通过commit来调用mutations,mutations中放着一个一个对state里面的数据修改的同步方法，最终改变了state里面的数据，有的时候可以略过actions,可以让组件通过commit来调用mutations修改数据。
具体使用步骤：

【1】安装 npm install vuex --save

【2】新建一个store文件夹，里面建一个index.js,state.js和mutations.js
index.js里面内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  mutations
})`

state.js用于保存公用数据，我这里保存了一个数据city

let defaultPlace='北京'
try {
  if(sessionStorage.city){
    defaultPlace=sessionStorage.city
  }
}catch (e) {


export default {
  city: defaultPlace
}

mutations.js用于保存操作数据的方法，我这里有一个改变state里面的city的changePlace方法，方法的第一个参数均为state对象

export default {
  changePlace(state,place) {
    state.city=place;
    try {
      sessionStorage.city=place
    }catch (e) {
      
    }
  }
}

【3】main.js中引入以及store注册‘

import store from './store'


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vuex结构就建好了。
然后在组件中需要使用city的时候

某个页面需要改变city的值的时候，比如：
下面点击某个div的时候触发一个叫handleCityClick的事件，该事件就要去改变state里面的city值

handleCityClick方法：

vuex的简单使用就结束了。
然后vuex给我们了更高级简单一点的用法就是提供了mapState,mapGetters,mapMutations，mapActions
下面简单介绍一下mapState

或者
意思就是将city属性映射为当前组件里面计算属性city或者currentCity,映射同名用上面的数组，映射为不同名字则用下面的对象，页面中直接用{{city}}或者{{currentyCity}}

mapMutations


上面的意思就是说将changeCity映射为该组件的changeCity,因此上面就可以直接调用。

另外getter的作用：（作用相当于computed计算属性里面），例如：

在页面中的使用，同样先映射在使用

作者才疏学浅，有不对的地方欢迎指正