vue同级组件传值

侧边栏是aside组件，上面是toolbar组件，现在希望点击侧边栏每个路由都能在toolbar的当前位置处及时更新相应的值，大型应用通常使用vuex管理这部分功能，由于同级组件不能直接传值，需要一个中间件，我们可以先将数据传递给公共的父组件，然后父组件再将数据传递给需要的子组件。

定义了一个公共文件 eventBus.js ，只是创建一个空的vue实例

import Vue from 'vue'
export default new Vue()

在需要通信的同级组件中分别引入eventBus.js文件

import bus from '../store/eventBus.js'

在Aside.vue中，通过$emit将事件和参数传递给Toolbar.vue

methods: {
  nowPos() {
  	bus.$emit('change', event.target.innerText);
  }
},

在Toolbar.vue 中，通过$on接收接收参数和相应事件

mounted() {
  bus.$on("change", (msg) => {
  	this.pos=msg;
  })
},

至于为什么Toolbar中要使用mounted详细参见：Vue的生命周期

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。