vue3遞歸組件封裝的全過程記錄

更新時間：2021年09月26日 11:51:12 作者：慕斯不想說話

組件是可以在自己的模板中調用自身的,不過他們只能通過name選項來做這件事,下面這篇文章主要給大家介紹了關于vue3遞歸組件封裝的相關資料,需要的朋友可以參考下

前言

今天在寫項目時，遇到一個自定義右鍵菜單的需求。在菜單中還有子菜單，所以這個時候就要用到遞歸組件了。所以寫下這篇文章來記錄一下自己編寫遞歸組件的過程。

1、遞歸組件

遞歸組件，顧名思義就是在組件本身內部調用自身。所以我們先構建一個組件，并在自身內部調用自身。常見的遞歸組件就是我們項目中經常會用到的樹組件了。下面就是我自己實現的一個能夠滿足項目需求的遞歸組件的源碼。

<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>

注意事項

在遞歸組件本身內部，調用自身時，需要將在遞歸組件上接收自己通過emit發(fā)出的自定義事件，接收后，在組件內部再次通過emit觸發(fā)自定義事件。
通過監(jiān)聽click事件,可以通過emit觸發(fā)自定義事件，在組件外部監(jiān)聽；也可以直接在通過 props傳遞數據到組件內部時，就自己先構建好回調，這樣就可以不用通過emit觸發(fā)自定義事件了。
在點擊遞歸組件中的菜單項時，需要讓遞歸組件銷毀。所有我們需要在遞歸組件內通過事件冒泡監(jiān)聽click,contextmenu等事件來讓組件銷毀，然后通過emit觸發(fā)自定義事件，讓外界接收，從而達到銷毀組件的目的。
在遞歸組件內部調用click事件時，需要阻止事件冒泡以及默認事件。可以在click事件后面添加click.prevent.stop來阻止事件冒泡和默認事件。

2、右鍵菜單組件

我項目中使用的是組件的形式來實現右鍵菜單菜單的。當然也可以通過插件的形式來實現。我這里的右鍵菜單本質上就是對遞歸組件的二次封裝，其實不用二次封裝也可以，可以直接使用遞歸組件作為右鍵菜單。

<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'
    }
  }
  //監(jiān)聽window自身的右鍵菜單事件
  onMounted(()=>{
    window.addEventListener('contextmenu',showContextMenu)
  })
  onBeforeUnmount(()=>{
    window.removeEventListener('contextmenu',showContextMenu)
  })