背景:
比如想要实现这样一个效果,当点击侧边菜单的时候,在顶部导航栏展示侧边菜单被选中的菜单名。侧边菜单和顶部导航分别是两个组件。两个毫无关系的组件。
实现:
eventBus- 发布订阅模式
- 写一个eventBus.js文件
import Vue from 'vue';
export default new Vue();
- 在需要通信的组件中分别引入这个文件
// nav
import eventBus from '@utils/eventBus';
// menu
import eventBus from '@utils/eventBus';
- 在侧边菜单中进行发布事件
const curPage = this.$route.meta.title;
eventBus.$emit('changeMenus', curPage);
- 在导航栏中进行订阅事件
在created或者mounted中进行监听
eventBus.$on('changeMenus', target => {
this.curPage = target;
})
这样两个毫无关联的组件之间就可以进行通信了,若有不对及建议,请指出~