第一步
header.vue

    <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>

第二步 方法

  // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            console.log(bus)
            console.log(bus.$emit('collapse'))
            bus.$emit('collapse', this.collapse);
        },

第三步
看看打印
在这里插入图片描述
第四步
到父组件
Home.vue

<v-sidebar></v-sidebar>

第五步
看看折叠方法
sideMenu.vue

    created() {
        // 通过 Event Bus 进行组件间通信,来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    }

运行结果
在这里插入图片描述
折叠完成