第一步
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>

第二步 方法

// 側(cè)邊欄折疊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 進(jìn)行組件間通信，來折疊側(cè)邊欄bus.$on('collapse', msg => {this.collapse = msg;bus.$emit('collapse-content', msg);});}

運(yùn)行結(jié)果

折疊完成

總結(jié)

以上是生活随笔為你收集整理的前端学习（2644）：懂代码之header表头页之折叠功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。