第一步
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);
});
}
运行结果
折叠完成
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签