Vue 菜单组件开发教程

news2025/11/4 16:10:15

在 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>