Vue3:Elemenu-Plus递归型菜单组件封装(2)

        在上一篇文章中,以Vue2的选项式 API风格,封装了递归型菜单组件,但是这其中存在着一些问题,例如:

        【1】子组件menuList.vue中,通过this.$emit()方式定义的事件,在Vue3组合式API风格父组件中可能会被执行多次。之所以说是可能,是因为我这测试中确实遇到了这个问题,子组件中确实只执行了一次,父组件中却执行了两次。

        【2】父子组件之间的props传值风格不同,vue3中,我们通常是通过defineProps API明确定义要传递的props属性,而Vue2中选项式API风格的组件,则直接可以通过export default导出的配置参数进行声明。这种不一致的写法在我写个人项目中,一向是不太赞同的。

         基于以上原因,我将上一篇文章《Vue:Elemenu-Plus递归型菜单组件封装》中的组件进行了改写,改为Vue3组合式API风格的组件,并对上述问题进行了解决。

        示例代码如下,

菜单子组件定义

        示例代码如下,

<!-- 多级菜单组件抽取 -->
<template>
    <el-menu :default-active="props.activeIndex" :class="props.customMenuClass" background-color="transparent"
        text-color="#fff" active-text-color="#ffef40" :mode="props.mode" @select="onSelect" :ellipsis="false">
        <template v-for="(item) in props.items">
            <template v-if="item.children">
                <el-sub-menu :index="item.index" popper-class="el-sub-menu-popper-class">
                    <template #title>
                        <router-link :to="item.path">
                            <el-icon>
                                <component :is="item.meta.icon" :size="24"></component>
                            </el-icon>
                            <span>{{ item.meta.title }}</span>
                        </router-link>
                    </template>
                    <!-- 直接使用文件名即可,不用考虑name的问题 -->
                    <!-- <menu-list :items="item.children" :mode="item.meta.mode" @select="onSelect"></menu-list> -->
                    <index :items="item.children" :mode="item.meta.mode" @select="onSelect"></index>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item :index="item.index" :key="item.path">
                    <router-link :to="item.path">
                        <el-icon>
                            <component :is="item.meta.icon" :size="24"></component>
                        </el-icon>
                        <span>{{ item.meta.title }}</span>
                    </router-link>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>
<script setup>
import { toRef, watch } from 'vue'
//declare props from parent-component
const props = defineProps({
    customMenuClass: {
        type: String,
        required: false,
        default: "el-menu-class",
    },
    mode: {
        type: String,
        default: "horizontal",
    },
    items: {
        type: Array,
        required: true,
    },
    activeIndex: {
        type: String,
        required: false,
        default: "",
    }
})

//declare emtits by current-component
const emits = defineEmits(["select"])

//declare watch-calls
watch(() => props.activeIndex, (value, oldValue) => {
    console.log('新的activeIndex,', value)
})

//declare methods
const onSelect = (key, keyPath, item) => {
    emits("select", { value: true, key, keyPath, item })
}
</script>
<style lang="scss" scoped>
.el-menu-class {
    .el-menu-item:not(.is-disabled):hover {
        background-color: rgba(127, 255, 212, .3);
    }
}
</style>
<style lang="scss">
.el-sub-menu-popper-class {
    background-color: $base-background-color !important;
}
</style>

父组件调用

            <menu-list :items="menuList" :active-index="activeIndex" mode="horizontal" @select="clickHandler" />


//其中,clickHandler为emit方式定义的子组件事件,函数定义如下
const clickHandler = ({ value, key, keyPath, item }) => {
    console.log('clickHandler', value, key, keyPath)
    console.log("item-value", item)
}

        在此之上,我们还可以完成一些其他操作,例如:菜单路由切换的本地缓存,以保证每次进入项目主页时,路由会自动跳转到上一次操作的页面;结合后端API接口调用,实现真正意义上的动态菜单;通过自定义指令,实现前端页面操作的权限控制等等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是席木木啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值