原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
Vue3?通过作用域插槽实现树形菜单嵌套组件
目录一、需求来源二、效果图三、使用示例（VTreeNodeDemo.vue）四、源码（VTreeNode.vue）：
一、需求来源
工作中需要一种树形菜单组件，经过两天的构思最终通过作用域插槽实现：此组件将每个节点（插槽名为node）暴露出来。
通过插槽的attributes向当前插槽节点传递子项item（数据对象）和level（层深）参数，在保持组件内部极简的同时支持在数据模型中扩展性。基本达到比较好的封装颗粒度，大家可以在此基础上无限扩展封装具体的业务逻辑。
二、效果图
letlist=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
{{prefix(slotProps.level)}}{{slotProps.item.name}}{{sufix(slotProps.item)}}
/div
/template
/VTreeNode
/template
scriptsetup
importVTreeNodefrom@/components/VTreeNode/VTreeNode.vue;
import{ref,reactive,watch,onMounted,}fromvue;
letlist=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,},
constlevel=ref(0);
constprefix=(count)={
return__.repeat(count);
constsufix=(item)={
if(!Reflect.has(item,child)){
return;
return`(${item.child.length}子项)`;
/script
stylescopedlang=scss
.tree-node{
height:45px;
display:flex;
justify-self:center;
align-items:center;
//background-color:green;
border-bottom:1pxsolid#e4e4e4;
/style
四、源码（VTreeNode.vue）：
template
!--div--
divv-for=(item,ind
文档评论（0）