const handleOpen = () => {}; const handleClose = () => {}; -Go服务器开发

要在 Vue 3 中实现一个组件控制另一个组件的收缩和展开，您可以使用状态管理（如 ref 或 reactive）来跟踪菜单是否处于收缩状态。以下是一个示例代码，展示如何实现这个功能。

完善后的代码

修改主组件以包含收缩状态：

<script setup>
import { ref } from 'vue';
const isCollapse = ref(false); // 用于跟踪菜单是否收缩
const handleOpen = () => {};
const handleClose = () => {};
const changeMenu = () => {
    isCollapse.value = !isCollapse.value; // 切换菜单的收缩状态
};
</script>
<template>
  <div>
    <header-component :is-collapse="isCollapse" @change-menu="changeMenu" />
    
    <el-menu
      active-text-color="#ffd04b"
      background-color="#112f50"
      class="el-menu-vertical-demo"
      :default-active="2"
      text-color="#fff"
      v-bind:collapse="isCollapse" 
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 菜单内容保持不变 -->
    </el-menu>
  </div>
</template>
<style lang='less' scoped>
.el-menu {
  border-right: 0;
}
.is-active {
  background-color: #3787de !important;
  color: #fff !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

创建 HeaderComponent 并传递 props 和事件：

<!-- HeaderComponent.vue -->
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    isCollapse: Boolean
});
</script>
<template>
    <div class="header">
        <div class="open">
            <i @click="$emit('change-menu')" class="el-icon-s-unfold" v-if="!isCollapse"></i>
            <i @click="$emit('change-menu')" class="el-icon-s-fold" v-else></i>            
        </div>
    </div>
</template>
<style lang='less' scoped>
.header {
    width: 100%;
    height: 50px;
    background-color: #1a78bf;
    color: #fff;
    line-height: 50px;
    .open {
        font-size: 24px;
        margin-left: 10px;
        i {
            cursor: pointer;
        }
    }
}
</style>

功能说明：

状态管理：
- 使用 ref 创建 isCollapse 来管理菜单的展开/收缩状态。
Header Component：
- 将收缩状态作为 prop（is-collapse）传递给 header component，并通过 $emit 发出点击事件，以切换菜单的收缩状态。
菜单组件：
- 在菜单组件中，通过指令将 collapse 属性绑定到 isCollapse，这样当其值变化时，可以自动控制显示效果。