脚本宝典收集整理的这篇文章主要介绍了vue3递归组件封装的全过程记录，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
今天在写项目时，遇到一个自定义右键菜单的需求。在菜单中还有子菜单，所以这个时候就要用到递归组件了。所以写下这篇文章来记录一下自己编写递归组件的过程。
  递归组件，顾名思义就是在组件本身内部调用自身。所以我们先构建一个组件，并在自身内部调用自身。常见的递归组件就是我们项目中经常会用到的树组件了。下面就是我自己实现的一个能够满足项目需求的递归组件的源码。
<template> <ul class="list-container"> <li v-for="(ITem,index) in listData" :key="index" class="list-item" @click.prevent.stop="handleClick($event,item)" @mouseover="childrenMenuIndex=index" > <span class="list-item_span"> {{item.text}} </span> <CaretRightOutlined v-if="item.children" /> <!-- 判断是否需要调用自身 --> <div v-if="item.children&&childrenMenuIndex===index" class="context-menu context-menu_children" > <!-- 在组件自身内部调用自身 --> <list-comp :list-data='item.children' @hideContextMenu='hideContextMenuEvent' /> </div> </li> </ul> </template>
<script>
import { definecomponent, ref } From "vue";
import {CaretRightOutlined} from '@ant-design/icons-vue';
export default defineComponent({
name:'list-comp',
PRops:{
listData:{
tyPE:Array,
default:()=>[]
}
},
components:{
CaretRightOutlined
},
emits:[
"hideContextMenu"
],
SETUP(props,{emit}){
//点击事件
const handleClick=(event,{text,callBack})=>{
emit('hideContextMenu');
//callBack是你自己传进来的回调函数，如果传入了，则调用自定义回调函数
if(callBack){
callBack();
return;
}
}
const hideContextMenuEvent=()=>{
emit('hideContextMenu');
}
//用于标识当前选中的菜单项
const childrenMenuIndex=ref(-1);
const eventnames=['click','contextmenu'];
onmounted(()=>{
eventNames.foreach(eventName=>window.addEventListener(eventName,hideContextMenuEvent))
})
onBeforeUnmount(()=>{
eventNames.forEach(eventName=>window.removeEventListener(eventName,hideContextMenuEvent))
})
return {
handleClick,
childrenMenuIndex,
hideContextMenuEvent
}
}
})
</script>
注意事项
我项目中使用的是组件的形式来实现右键菜单菜单的。当然也可以通过插件的形式来实现。我这里的右键菜单本质上就是对递归组件 的二次封装，其实不用二次封装也可以，可以直接使用递归组件作为右键菜单。
<template>
<teleport to='body' >
<div class="content-menu_container" :style="styleObj">
<list-comp
:list-data='menuData'
@hideContextMenu='windowClickHandler'
/>
</div>
</teleport>
</template>
<script>
import { defineComponent } from "vue";
import ListComp from "./list-comp.vue"
export default defineComponent({
name:"contextMenu",
components:{
ListComp
},
props:{
styleObj:{
type:Object,
default:()=>{}
},
menuData:{
type:Array,
default:()=>[]
}
},
emits:['closeContextMenu'],
setup(props,{emit}){
const windowClickHandler=()=>{
emit('closeContextMenu')
};
return {
windowClickHandler,
}
}
})
</script>
注意事项
在项目中调用右键菜单时，需要先禁用掉window自身的右键菜单事件。然后实现自己的自定义菜单事件。实现代码如下所示。
const showContextMenu=(event)=>{
//禁用默认事件和阻止冒泡
event.stopPropagation();
event.preventDefault();
state.showContextMenu=true;
state.styleObj={
left:event.clientX+ "px",
top:event.clientY+'px'
}
}
//监听window自身的右键菜单事件
onMounted(()=>{
window.addEventListener('contextmenu',showContextMenu)
})
onBeforeUnmount(()=>{
window.removeEventListener('contextmenu',showContextMenu)
})
到此这篇关于vue3递归组件封装的文章就介绍到这了,更多相关vue3递归组件封装内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的vue3递归组件封装的全过程记录全部内容，希望文章能够帮你解决vue3递归组件封装的全过程记录所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。