Vue3 通过作用域插槽实现树形菜单嵌套组件
短信预约 -IT技能 免费直播动态提醒
一、需求来源
工作中需要一种树形菜单组件，经过两天的构思最终通过作用域插槽实现： 此组件将每个节点（插槽名为 node）暴露出来。
通过插槽的 attributes 向当前插槽节点传递子项 item（数据对象）和level（层深）参数，在保持组件内部极简的同时支持在数据模型中扩展性。基本达到比较好的封装颗粒度，大家可以在此基础上无限扩展封装具体的业务逻辑。
二、效果图
let list = reactive(
[{
name:'1 一级菜单',
isExpand: true,//是否展开子项
enabled: false,//是否可以响应事件
child:[
{ name:'1.1 二级菜单',
isExpand: true,
child:[
{ name:'1.1.1 三级菜单', isExpand: true, },
]
},
{ name:'1.2 二级菜单', isExpand: true, },
]
},
{
name:'1.1 一级菜单',
isExpand: true,
child:[
{ name:'1.1.1 二级菜单', isExpand: true, },
{ name:'1.1.2 二级菜单',
isExpand: false,
child:[
{ name:'1.1.2.1 三级菜单', isExpand: true, },
]},
]
},]
);
三、使用示例（VTreeNodeDemo.vue）
<template>
<VTreeNode
:list="list"
:level="level"
>
<template #node="slotProps">
<div class="tree-node">
{{prefix(slotProps.level)}}{{slotProps.item.name}}{{sufix(slotProps.item)}}
</div>
</template>
</VTreeNode>
</template>
<script setup>
import VTreeNode from '@/components/VTreeNode/VTreeNode.vue';
import { ref, reactive, watch, onMounted, } from 'vue';
let list = reactive(
[{
name:'1 一级菜单',
isExpand: true,//是否展开子项
enabled: false,//是否可以响应事件
child:[
{ name:'1.1 二级菜单',
isExpand: true,
child:[
{ name:'1.1.1 三级菜单', isExpand: true, },
]
},
{ name:'1.2 二级菜单', isExpand: true, },
]
},
{
name:'1.1 一级菜单',
isExpand: true,
child:[
{ name:'1.1.1 二级菜单', isExpand: true, },
{ name:'1.1.2 二级菜单',
isExpand: false,
child:[
{ name:'1.1.2.1 三级菜单', isExpand: true, },
]},
]
},]
);
const level = ref(0);
const prefix = (count) => {
return '__'.repeat(count);
};
const sufix = (item) => {
if (!Reflect.has(item, 'child')) {
return '';
}
return ` (${item.child.length}子项)`;
};
</script>
<style scoped lang='scss'>
.tree-node{
height: 45px;
display: flex;
justify-self: center;
align-items: center;
// background-color: green;
border-bottom: 1px solid #e4e4e4;
}
</style>
四、源码（VTreeNode.vue）：
<template>
<!-- <div> -->
<div v-for="(item,index) in list" :key="index">
<slot name="node" :item="item" :level="levelRef">
<div>{{ item.name }}</div>
</slot>
<div v-show="item.child && canExpand(item)" >
<VTreeNode :list="item.child" :level="levelRef">
<template #node="slotProps">
<slot name="node" :item="slotProps.item" :level="slotProps.level">
<div>{{ slotProps.item.name }}</div>
</slot>
</template>
</VTreeNode>
</div>
</div>
<!-- </div> -->
</template>
<script setup>
import { ref, reactive, watch, computed, onMounted, } from 'vue';
const props = defineProps({
list: {
type: Array,
default: () => [],
validator: (val) => {
return Array.isArray(val) && val.every(e => Reflect.has(e, 'name'));
}
},
level: {
type: Number,
default: 0,
}
});
const emit = defineEmits(['update:level', ])
const levelRef = computed({
set: (newVal) => {
if (props.level !== newVal) {
emit("update:level", newVal);
}
},
get: () => {
const tmp = props.level + 1;
return tmp;
},
});
const canExpand = (item) => {
return Reflect.has(item, 'isExpand') && item.isExpand;
};
// onMounted(() => {
// console.log(`levelRef:${levelRef.value}`);
// });
</script>
VTreeNode.vue
VTreeNodeDemo.vue
以上就是Vue3 通过作用域插槽实现树形菜单/嵌套组件的详细内容，更多关于Vue3 树形菜单嵌套组件的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
