侧边栏是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节点进行一些需要的操作。