使用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 事件總線的基本使用和重複觸發事件問題的解決