vue3、Element-Plus，el-menu，Collapse折叠展开动画显示。组件与组件之间传参

首先我的head和menu是分开的2个组件，我的控制开关是放到head组件里面的。所以使用了组件之间相互传参的插件mitt，mitt插件的安装放文章最后。

<el-container>
  <el-aside width="auto"><MenuView /></el-aside>
  <el-container>
    <el-header><HeadView /></el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

重点：el-aside必须加width=“auto”

以下是menu页面需要添加的代码

<el-menu
    default-active="1"
    class="el-menu-container"
    :collapse="isCollapse"	// 这是监控菜单的折叠，默认false。为true就是缩进，false就是展开。动画默认开启的，也可以关闭。具体去查看文档
    :unique-opened=true
    background-color="#304156"
    text-color="#FFFFFF"
    active-text-color="#409eff"
    @open="handleOpen"
    @close="handleClose"
    >
    <el-menu-item index="0">	// 把logo放到menu里面是觉得方便，不需要修改class。不喜欢的这里可以删除
        <el-icon v-if="isCollapse"><HelpFilled /></el-icon>	// isCollapse为true是缩进显示图标不显示文字，展开显示文字不显示图标
        <template #title>
          <div class="jsoText">Jsocc</div>
        </template>
      </el-menu-item>
    <router-link to="/main">
      <el-menu-item index="1">
        <el-icon><ElementPlus /></el-icon>
        <template #title>
        	首页
        </template>
      </el-menu-item>
    </router-link>
</el-menu>
.....中间省略
// 在当前文件下里面
<script lang="ts" setup>
const isCollapse = ref(false)
.....中间省略
<style lang="scss" scoped>
// 重要以下就是添加menu的宽度和高度。
.el-menu-container:not(.el-menu--collapse) {
  width: 200px;
  height: calc(100vh);
}

如果控制开关不是分开组件放
就可以直接在menu里面定义一个按钮

const menuOpen = () => {
	isCollapse.value = !isCollapse.value	// 相互取反，点击true，在点击false
}

这样就可以打开关闭menu了。

下面讲一下组件与组件之间传参，需要用到mitt插件
首先安装mitt

npm install mitt -S

这个插件不能直接使用必须暴露出来才能使用，和element-plus差不多。不过这里我们就不添加全局了。我们写一个utils。在utils里面新建一个eventbus.ts，新建js的也是行的。
代码如下

// mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象
/* eventbus.js */
// 这里我们在js中暴露这个事件总线对象
import mitt from "mitt";
const emitter = mitt();
export default emitter;

然后在head里面引用出来

import emitter from "@/utils/eventbus.ts" //引用刚刚新建的utils文件

const menuL = ref<boolean>(false)	// 建立一个menuL

const cpLeft = () => {	// head里面的图标点击按钮
  menuL.value = !menuL.value	//首先把menuL取反
  menuL.value ? head_icon.value = 'Expand' : head_icon.value = 'Fold'	//这里是改变按钮上面的图标式样
  emitter.emit("sayInfo",menuL.value)	//通过mitt的emit把menuL传递出去，sayInfo传参名称
}

然在到menu页面去接受这个sayInfo传递过来的参数
接收参数必须放到onMounted里面，使用mitt里面on命令获取head传送过来的值
然后把info值直接赋给isCollapse。到这里就可以控制menu里面的collapse了，实现折叠展开

import emitter from "@/utils/eventbus.ts" //menu也要引用刚刚新建的utils文件

onMounted(()=>{
    emitter.on("sayInfo",(info:any)=>{
      isCollapse.value = info
    })
})

OK，结束了
有什么问题请留言，看到后会即使回复。
鄙人新手，有写的不好的地方请包含。