Vue 菜单组件开发教程

在 Vue 项目中，我们常常需要构建各种菜单结构。下面就来详细介绍如何基于给定的代码来开发一个菜单组件。
在这里插入图片描述

组件部分

一、模板部分

<template> <template v-for="item in menuTree" :key="item._id"> <el-sub-menu v-if="item.children && item.children.length > 0" :key="item._id" :index="item.name"><template #title><span>{{ item.title }}</span></template><el-menu-item-group><tree-menu :menuTree="item.children" /></el-menu-item-group></el-sub-menu><el-menu-item v-else :index="item.name" @click="clickMenu(item)" style=""><span>{{ item.title }}</span></el-menu-item></template>
</template>

这里通过 v-for 循环遍历 menuTree 数据来生成菜单项目。根据每个项目是否有子项，分别渲染为不同的组件。

二、脚本部分

<script setup lang="ts">import { onMounted, reactive,  ref,defineProps} from 'vue';const props = defineProps({menuTree: []});// 点击菜单时的处理函数function clickMenu(val) {// 这里可以进行各种点击后的操作}
</script>

我们导入了必要的模块，定义了接收外部传入的 menuTree 数据的属性。clickMenu 函数用于处理菜单点击事件。

三、样式部分

<style>.el-menu-item,.el-menu-item{width: 230px;}
</style>

这部分用于设置菜单项目的宽度等样式。

父级调用示例

示例代码调用

假设我们有以下的菜单数据：

const menuData = [{_id: 1,name: '菜单 1',title: '菜单 1 标题',children: [{_id: 2,name: '子菜单 1',title: '子菜单 1 标题'}]},{_id: 3,name: '菜单 2',title: '菜单 2 标题',ismenu: 1}
];

然后在使用该组件的地方可以这样进行设置：

			<el-menu :default-active="activeMenu" class="nav-menu" :router="true" :show-timeout="3000" :collapse="isCollapse"><tree-menu :menuTree="menuData" /></el-menu>