快捷導(dǎo)航

vue3遞歸組件封裝的全過(guò)程記錄

更新時(shí)間：2021年09月26日 11:51:12 作者：慕斯不想說(shuō)話

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

前言

今天在寫(xiě)項(xiàng)目時(shí)，遇到一個(gè)自定義右鍵菜單的需求。在菜單中還有子菜單，所以這個(gè)時(shí)候就要用到遞歸組件了。所以寫(xiě)下這篇文章來(lái)記錄一下自己編寫(xiě)遞歸組件的過(guò)程。

1、遞歸組件

遞歸組件，顧名思義就是在組件本身內(nèi)部調(diào)用自身。所以我們先構(gòu)建一個(gè)組件，并在自身內(nèi)部調(diào)用自身。常見(jiàn)的遞歸組件就是我們項(xiàng)目中經(jīng)常會(huì)用到的樹(shù)組件了。下面就是我自己實(shí)現(xiàn)的一個(gè)能夠滿足項(xiàng)目需求的遞歸組件的源碼。

<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"  />
           <!-- 判斷是否需要調(diào)用自身 -->
           <div v-if="item.children&&childrenMenuIndex===index"
            class="context-menu context-menu_children"
           >
            <!-- 在組件自身內(nèi)部調(diào)用自身 -->
            <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}){
    	//點(diǎn)擊事件
        const handleClick=(event,{text,callBack})=>{
            emit('hideContextMenu');
            //callBack是你自己傳進(jìn)來(lái)的回調(diào)函數(shù)，如果傳入了，則調(diào)用自定義回調(diào)函數(shù)
            if(callBack){
                callBack();
                return;
            }
        }
        const hideContextMenuEvent=()=>{
            emit('hideContextMenu');    
        }
        //用于標(biāo)識(shí)當(dāng)前選中的菜單項(xiàng)
        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>

注意事項(xiàng)

在遞歸組件本身內(nèi)部，調(diào)用自身時(shí)，需要將在遞歸組件上接收自己通過(guò)emit發(fā)出的自定義事件，接收后，在組件內(nèi)部再次通過(guò)emit觸發(fā)自定義事件。
通過(guò)監(jiān)聽(tīng)click事件,可以通過(guò)emit觸發(fā)自定義事件，在組件外部監(jiān)聽(tīng)；也可以直接在通過(guò) props傳遞數(shù)據(jù)到組件內(nèi)部時(shí)，就自己先構(gòu)建好回調(diào)，這樣就可以不用通過(guò)emit觸發(fā)自定義事件了。
在點(diǎn)擊遞歸組件中的菜單項(xiàng)時(shí)，需要讓遞歸組件銷毀。所有我們需要在遞歸組件內(nèi)通過(guò)事件冒泡監(jiān)聽(tīng)click,contextmenu等事件來(lái)讓組件銷毀，然后通過(guò)emit觸發(fā)自定義事件，讓外界接收，從而達(dá)到銷毀組件的目的。
在遞歸組件內(nèi)部調(diào)用click事件時(shí)，需要阻止事件冒泡以及默認(rèn)事件?？梢栽赾lick事件后面添加click.prevent.stop來(lái)阻止事件冒泡和默認(rèn)事件。

2、右鍵菜單組件

我項(xiàng)目中使用的是組件的形式來(lái)實(shí)現(xiàn)右鍵菜單菜單的。當(dāng)然也可以通過(guò)插件的形式來(lái)實(shí)現(xiàn)。我這里的右鍵菜單本質(zhì)上就是對(duì)遞歸組件的二次封裝，其實(shí)不用二次封裝也可以，可以直接使用遞歸組件作為右鍵菜單。

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

注意事項(xiàng)

在項(xiàng)目中調(diào)用右鍵菜單時(shí)，需要先禁用掉window自身的右鍵菜單事件。然后實(shí)現(xiàn)自己的自定義菜單事件。實(shí)現(xiàn)代碼如下所示。

const showContextMenu=(event)=>{
    //禁用默認(rèn)事件和阻止冒泡
    event.stopPropagation();
    event.preventDefault();
    state.showContextMenu=true;
    state.styleObj={
      left:event.clientX+ "px",
      top:event.clientY+'px'
    }
  }
  //監(jiān)聽(tīng)window自身的右鍵菜單事件
  onMounted(()=>{
    window.addEventListener('contextmenu',showContextMenu)
  })
  onBeforeUnmount(()=>{
    window.removeEventListener('contextmenu',showContextMenu)
  })