使用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 事件总线的基本使用和重复触发事件问题的解决