使用EventBus实现兄弟组件之间的通讯

使用EventBus实现兄弟组件之间的通讯

需求：为了实现菜单折叠的效果，例如http://blog.gdfengshuo.com/example/work/#/dashboard

header组件和sliderbar组件都是main组件下面的子组件，二者为兄弟关系。

现有下面的思路:

点击折叠按钮，触发事件，让main组件和sliderbar组件 分别改变各自的样式。

即：兄弟组件通讯

方法

1. 新建bus.js

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

2. header组件触发事件

header.vue

<div class="collapse-btn" @click="collapseChage">
            <i class="el-icon-menu"></i>
   </div>

<script>
    import bus from '../common/bus'; // bie忘记引入 我没有挂载到vue实例上，须要本身引入
    export default {
        data() {
            return {
                collapse: false
            }
        },
        methods:{
            // 侧边栏折叠
            collapseChage(){
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            }
           
        }
    }
</script>

3. 在silderbar组建中监听该事件，and to do something...

<el-menu 
	class="sidebar-el-menu" 
	:default-active="onRoutes" 
	:collapse="collapse" 
	background-color="#324157"
	text-color="#bfcbd9" 
	active-text-color="#20a0ff" 
	unique-opened 
	router>
</el-menu>
<script>
    import bus from '../common/bus'; // bie忘记引入 我没有挂载到vue实例上，须要本身引入
    export default {
        data() {
            return {
                collapse: false
            }
        },
       created(){
            // 经过 Event Bus 进行组件间通讯，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
        }
    }
</script>

补充

VUE 爬坑之旅-- eventBus 事件总线的基本使用和重复触发事件问题的解决

爬坑之旅-- eventBus 事件总线的基本使用和重复触发事件问题的解决