<template>
    <div> <!-- Add a single root element, like <div> -->
      <template v-if="item.meta && !item.meta.hidden">
        <el-sub-menu :index="item.path" :key="item.index" v-if="item?.children?.length > 0">
            <template slot="title">{{ item.meta.title }}</template>
          <menuItem v-for="child in item.children" :item="child" :key="child.index" />
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" @click="toggleMenu">{{ item.meta.title }}</el-menu-item>
      </template>
    </div> <!-- Closing the root element -->
  </template>
  
<script setup name="menuItem">
import { getCurrentInstance } from 'vue';
const props = defineProps({
    item: {
        type: Object,
        default: () => { },
    },
})
// 获取全局属性
const { proxy } = getCurrentInstance();
const showMenu = proxy.$showMenu;

const toggleMenu = () => {
    showMenu.value = !showMenu.value;
    console.log(showMenu.value);
}
</script>
<style lang='scss' scoped>
</style>
