vue二次封装组件,Vue递归组件
组件可以在自己的模板中调用自己，但只能通过name选项来实现。下面这篇文章主要介绍vue3递归组件封装的相关信息，有需要的朋友可以参考一下。
目录
前言1，递归组件2，右键菜单组件概述
前言
今天写项目的时候，遇到一个需要自定义右键菜单的问题。菜单里有子菜单，所以这个时候会用到递归组件。所以写这篇文章来记录写递归组件的过程。
1、递归组件
递归组件，顾名思义，就是在组件本身内部调用自己。所以让我们首先构建一个组件，并在它自己内部调用它自己。常见的递归组件是我们项目中经常使用的树组件。下面是我自己实现的一个递归组件的源代码，满足项目需求。
模板
ul class=列表容器
li v-for=(item，index) in listData
:key=index class=list-item
@ click . prevent . stop= handle click($ event，item)
@ mouse over= childrenMenuIndex=index
span class=list-item_span
{{item.text}}
/span
CaretRightOutlined v-if= item . children /
！-判断你是否需要给自己打电话-
div v-if= item . childrenchildrenmenuindex===index
context-menu context-menu _ children
！-在组件内部调用它自己-
list-comp:list-data= item . children @ hideContextMenu= hideContextMenuEvent /
/div
/李
/ul
/模板
脚本
从“vue”导入{ defineComponent，ref }；
从“@ant-design/icons-vue”导入{ CaretRightOutlined }；
导出默认定义组件({
名称：列表组件，
道具：{
列表数据：{
类型：数组，
默认值：()=[]
}
},
组件：{
职业概述
},
发出：[
hideContextMenu
],
设置(道具，{emit}){
//点击事件
const handleClick=(event，{text，callBack})={
emit( hideContextMenu )；
//callBack是自己传入的回调函数。如果是传入的，调用自定义回调函数。
如果(回调){
回调()；
返回；
}
}
const hideContextMenuEvent=()={
emit( hideContextMenu )；
}
//用于标识当前选定的菜单项
const childrenMenuIndex=ref(-1)；
const eventNames=[click ， context menu ]；
onMounted(()={
event names . foreach(event name=window . addevent listener(event name，hideContextMenuEvent))
})
onBeforeUnmount(()={
event names . foreach(event name=window . removeeventlistener(event name，hideContextMenuEvent))
})
返回{
手柄点击，
childrenMenuIndex，
hideContextMenuEvent
}
}
})
/脚本
需要注意的事项
在递归组件本身内部，调用自身时，需要接收递归组件上的emit发送的自己的自定义事件，接收到之后，通过组件内部的emit再次触发自定义事件。
通过监控click事件，可以通过emit触发一个自定义事件在组件外部进行监控；也可以在通过props向组件传递数据时直接构建自己的回调，这样就不需要通过emit触发自定义事件了。
当单击递归组件中的菜单项时，需要让递归组件被销毁。我们都需要通过事件冒泡监听递归组件中的click、contextmenu等事件来破坏组件，然后通过emit触发自定义事件供外界接收，从而达到破坏组件的目的。
当在递归组件内部调用click事件时，有必要防止事件冒泡和默认事件。您可以在click事件后添加click.prevent.stop，以防止该事件冒泡并成为默认事件。
2、右键菜单组件
我项目中使用的是组件的形式来实现右键菜单菜单的。当然也可以通过插件的形式来实现。我这里的右键菜单本质上就是对递归组件的二次封装，其实不用二次封装也可以，可以直接使用递归组件作为右键菜单。
模板
传送到=身体
content-menu _ container :style= style obj
列表-比较
:list-data=menuData
@ hideContextMenu= windowClickHandler
/
/div
/瞬间移动
/模板
脚本
从“vue”导入{定义组件}；
从导入列表组件 list-comp.vue
导出默认定义组件({
名称：上下文菜单，
组件：{
列表组件
},
道具：{
styleObj:{
类型：对象，
默认值：()={}
},
menuData:{
类型：数组，
默认值：()=[]
}
},
发出：[closeContextMenu]，
设置（道具，{emit}){
const windowClickHandler=()={
发出(“closeContextMenu”)
};
返回{
windowClickHandler，
}
}
})
/脚本
注意事项
在项目中调用右键菜单时，需要先禁用掉窗户自身的右键菜单事件。然后实现自己的自定义菜单事件。实现代码如下所示。
const showContextMenu=(event)={
//禁用默认事件和阻止冒泡
事件。停止传播()；
事件。防止默认()；
state.showContextMenu=true
state.styleObj={
左：event.clientX px ，
top:event.clientY px
}
}
//监听窗户自身的右键菜单事件
onMounted(()={
窗户。addevent侦听器(“上下文菜单”，showContextMenu)
})
onBeforeUnmount(()={
窗户。removeeventlistener(上下文菜单，showContextMenu)
})
总结
到此这篇关于vue3递归组件封装的文章就介绍到这了，更多相关vue3递归组件封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。